Develop Reference

Print JS Variable in HTML

I would like to output a JS variable to HTML. Until now I have attached it to the URL and then truncated it. unfortunately other things like this don't work and I would like to pass the Label variable directly into 'Tablet_name'. Is this possible?
Here is the JS code with the var label.
function search_period(period, max_num, offset) {
var count = 0;
var link = ""
var div = document.createElement('div')
var h2 = document.createElement('h2')
var iiif = ""
h2.innerHTML = period
document.body.appendChild(h2)
const keys = Object.keys(urls);
for(const elem of keys) {
var label = urls[elem].label
for(const el of urls[elem].variants) {
if(el.label.includes('front')) {
iiif = el.url
}
}
if(!periods.hasOwnProperty(label)) {
continue;
}
if(periods[label] != period) {
continue;
}
if(count < offset) {
count+=1
continue
}
link = changeIIIFInformation(iiif, 10, "default")
var figure = document.createElement('figure')
var figcaption = document.createElement('figcaption')
var linkToImage = document.createElement('a')
//linkToImage.setAttribute('#image', label)
linkToImage.setAttribute('href', 'annotator#'+label)
linkToImage.innerHTML = label
figcaption.appendChild(linkToImage)
var image = document.createElement('img')
image.setAttribute('src', link)
figure.appendChild(image)
figure.appendChild(figcaption)
div.appendChild(figure)
count += 1;
if(count >= max_num+offset) {
break;
}
}
document.body.appendChild(div)
}
And here is the HTML Code:
var tablet_name = ""
var default_tablet_link = ""
if(document.URL.includes('#')) {
tablet_name = document.URL.split('#')[1]
} else {
tablet_name = 'HS_0044'
}
I want the for the tablename the variable label.

Event listener to get next item in array

Creating a script to cycle thru items in an array, ideally both next and previous items. Currently the script works however, it always begins at the zero index, no matter which item is currently displaying in the 'mock modal' being created. Full script here:
var dogs = document.querySelectorAll(".dog-div");
var dogArr = Array.prototype.slice.call(dogs);
var modal = document.querySelector(".modal");
var modalTitle = document.querySelector(".modal-title");
var modalImg = document.querySelector(".modal-img");
var leftArrow = document.getElementById("left-arrow");
var rightArrow = document.getElementById("right-arrow");
for (i = 0; i < dogArr.length; i++) {
dogArr[i].addEventListener("click", function(e){
e.preventDefault();
modal.style.display = "block";
modalTitle.textContent = this.dataset.dogName;
modalImg.setAttribute("src", this.dataset.dogImage );
})
}
function nextDog() {
i = i + 1;
i = i % dogArr.length;
return dogArr[i];
}
rightArrow.addEventListener("click", function(e) {
e.preventDefault();
console.log(nextDog());
})
Any guidance appreciated.

Try this:
var dogs = document.querySelectorAll(".dog-div");
var dogArr = Array.prototype.slice.call(dogs);
var modal = document.querySelector(".modal");
var modalTitle = document.querySelector(".modal-title");
var modalImg = document.querySelector(".modal-img");
var leftArrow = document.getElementById("left-arrow");
var rightArrow = document.getElementById("right-arrow");
function makeIterable(arr) {
var cur = 0;
arr.next = function () {
return ++cur >= this.length ? false : this[cur];
};
arr.prev = function () {
return --cur < 0 ? false : this[cur];
};
arr.cur = function () {
return cur;
};
arr.setCur = function (pos) {
cur = pos;
};
return arr;
};
makeIterable(dogArr);
function clickedClassHandler(name,callback) {
var allElements = document.body.getElementsByTagName("*");
for(var x = 0, len = allElements.length; x < len; x++) {
if(allElements[x].className == name) {
allElements[x].onclick = handleClick;
}
}
function handleClick() {
var elmParent = this.parentNode;
var parentChilds = elmParent.childNodes;
var index = 0;
for(var x = 0; x < parentChilds.length; x++) {
if(parentChilds[x] == this) {
break;
}
if(parentChilds[x].className == name) {
index++;
}
}
callback.call(this,index);
}
}
clickedClassHandler("dog-div",function(index){
dogArr.setCur(index); //here's where you set the current position of the array based on whichever item is selected.
modal.style.display = "block";
modalTitle.textContent = dogArr[dogArr.cur()].dataset.dogName;
modalImg.setAttribute("src", dogArr[dogArr.cur()].dataset.dogImage );
});
rightArrow.addEventListener("click", function(e) {
e.preventDefault();
if (dogArr.cur() < dogArr.length-1) {
console.log(dogArr.next());
modalTitle.textContent = dogArr[dogArr.cur()].dataset.dogName;
modalImg.setAttribute("src", dogArr[dogArr.cur()].dataset.dogImage );
}
})
leftArrow.addEventListener("click", function(e) {
e.preventDefault();
if (dogArr.cur() != 0) {
console.log(dogArr.prev());
modalTitle.textContent = dogArr[dogArr.cur()].dataset.dogName;
modalImg.setAttribute("src", dogArr[dogArr.cur()].dataset.dogImage );
}
})
You need to remember the position of the clicked item whenever you click on the button.

Inside nextDog function you are using variable i, which was used in previous for loop. After for loop variable i has the value of dogArr.length. Hence in first call of nextDog i value determined by:
i = (dogArr.length +1) % dogArr.length;
You get 2nd position(index=1) of dogArr
So I suggest, you to use another global variable to track current index of showing item.
var dogs = document.querySelectorAll(".dog-div");
var dogArr = Array.prototype.slice.call(dogs);
//global tracker
var currIndex=dogArr.length;
var modal = document.querySelector(".modal");
var modalTitle = document.querySelector(".modal-title");
var modalImg = document.querySelector(".modal-img");
var leftArrow = document.getElementById("left-arrow");
var rightArrow = document.getElementById("right-arrow");
for (i = 0; i < dogArr.length; i++) {
dogArr[i].addEventListener("click", function(e){
e.preventDefault();
modal.style.display = "block";
modalTitle.textContent = this.dataset.dogName;
modalImg.setAttribute("src", this.dataset.dogImage );
//get item index from dataset
currIndex=this.dataset.indexNumber;
});
//set item index here
dogArr[i].dataset.indexNumber=i;
}
function nextDog() {
currIndex = currIndex + 1;
currIndex = currIndex % dogArr.length;
return dogArr[currIndex];
}
rightArrow.addEventListener("click", function(e) {
e.preventDefault();
console.log(nextDog());
})

Wanted to post my answer after some time. More or less, got a working example with the below codepen:
https://codepen.io/leroyrosales/pen/GRpMwdg
var dogs = document.querySelectorAll(".dog-div");
var dogArr = Array.prototype.slice.call(dogs);
var modal = document.querySelector(".modal");
var modalTitle = document.querySelector(".modal-title");
var modalImg = document.querySelector(".modal-img");
var leftArrow = document.getElementById("left-arrow");
var rightArrow = document.getElementById("right-arrow");
var current = dogArr.length;
for (i = 0; i < dogArr.length; i++) {
dogArr[i].addEventListener("click", function(){
modal.style.display = "block";
current = dogArr.indexOf(this);
modalContent(this);
this.classList.add("active");
})
}
function modalContent(modal){
console.log(modal);
var dogName = modal.dataset.dogName;
console.log(dogName);
var dogImg = modal.dataset.dogImage;
console.log(dogImg);
modalTitle.textContent = dogName;
modalImg.setAttribute("src", dogImg );
}
function nextDog() {
current = current + 1;
current = current % dogArr.length;
return modalContent(dogArr[current]);
}
function prevDog() {
current = current - 1;
current = current % dogArr.length;
return modalContent(dogArr[current]);
}
rightArrow.addEventListener("click", function() {
nextDog();
})
leftArrow.addEventListener("click", function() {
prevDog();
})

i want to make my shoppingcart local so every time i refresh the page my stuff still needs to be in there but i just dont find the right way to do it

This is my code but I don't know where to start to add localstorage.
I am really trying every website for help because I just can't find it.
var _currentArr;
var _ItemsInCart = [];
var _totalPayment = 0;
function getArticle(item, addDetails) {
var article = document.createElement("article");
var h3 = document.createElement("H3");
h3.appendChild(document.createTextNode(item.title));
article.appendChild(h3);
var figure = document.createElement("FIGURE");
var img = document.createElement('img');
img.src = 'images/'+item.img;
var figcaption = document.createElement('figcaption');
figcaption.textContent = 'Meal by: '+item.cook;
figure.appendChild(img);
figure.appendChild(figcaption);
article.appendChild(figure);
// if need details
if (addDetails) {
var dl = document.createElement("dl");
var dt1 = document.createElement("dt");
var dd1 = document.createElement("dd");
dt1.textContent = 'calories:';
dd1.textContent = item.calories;
dl.appendChild(dt1);
dl.appendChild(dd1);
var dt2 = document.createElement("dt");
var dd2 = document.createElement("dd");
dt2.textContent = 'servings:';
dd2.textContent = item.servings;
dl.appendChild(dt2);
dl.appendChild(dd2);
var dt3 = document.createElement("dt");
var dd3 = document.createElement("dd");
dt3.textContent = 'days to book in advance:';
dd3.textContent = item.book;
dl.appendChild(dt3);
dl.appendChild(dd3);
var dt4 = document.createElement("dt");
var dd4 = document.createElement("dd");
dt4.textContent = 'type:';
dd4.textContent = item.type;
dl.appendChild(dt4);
dl.appendChild(dd4);
article.appendChild(dl);
}
// info div
var div = document.createElement("DIV");
div.setAttribute("class", "info");
var p = document.createElement("P");
p.textContent = '€'+item.price+'/pp';
var a = document.createElement("A");
a.setAttribute("href", '#');
a.textContent = 'order';
a.setAttribute("id", item.id);
if (addDetails) {
a.setAttribute("data-item", JSON.stringify(item));
a.className = "order placeOrderInCart";
} else {
a.className = "order orderBtn";
}
// in div
div.appendChild(p);
div.appendChild(a);
article.appendChild(div);
return article;
}
function makeTemplateFromArray(arr) {
_currentArr = [];
_currentArr = arr;
var container = document.getElementById('dynamicContent');
container.innerHTML = '';
if (arr && arr.length) {
arr.forEach(function (item, index) {
// append article
container.appendChild(getArticle(item, false));
});
}
}
function makeTemplateFromItem(item) {
if (item) {
var container = document.getElementById('popupContentWrapper');
container.innerHTML = '';
container.appendChild(getArticle(item, true));
}
}
function showModal(id) {
// find item by id
if (_MEALS && id) {
var found = _MEALS.find(function(item) {
if (item.id === parseInt(id)) {
return true;
}
});
if (found) {
makeTemplateFromItem(found);
}
}
// open modal
document.getElementById('popup').style.display = "block";
}
// sorting
function sortItems() {
var a = _MEALS.slice(0, _MEALS.length);
var k = event.target.value;
makeTemplateFromArray(doSortData(k, a));
}
function doSortData(key, arr) {
var compare = function ( a, b) {
if ( a[key] < b[key] ){
return -1;
}
if ( a[key] > b[key] ){
return 1;
}
return 0;
};
return arr.sort( compare );
}
// change direction
function changeDirection() {
var val = event.target.value;
var a = _currentArr.slice(0, _currentArr.length);
if (val === 'desc') {
makeTemplateFromArray(a.reverse());
} else {
makeTemplateFromArray(_MEALS);
}
}
// search on input
function searchInArray() {
var val = event.target.value;
if (val && val.length > 1) {
val = val.toLowerCase();
var arr = _MEALS.filter(function (item) {
if (item.title.toLowerCase().includes(val)) {
return true;
}
});
makeTemplateFromArray(arr);
} else {
makeTemplateFromArray(_MEALS);
}
}
// prepare options
function prepareOptions(obj) {
var select = document.getElementById('sortby');
Object.keys(obj).forEach(function (key) {
var opt = document.createElement('option');
opt.value = key;
opt.innerHTML = key;
select.appendChild(opt);
});
}
// add item in cart
function addItemInCart(item) {
_ItemsInCart.push(item);
var elem = document.getElementById('cartCounter');
elem.innerHTML = _ItemsInCart.length;
}
// show cart
function showCart() {
// prepare template
var container = document.getElementById('cartItems');
var table = document.createElement("table");
var thead = document.createElement("thead");
var tbody = document.createElement("tbody");
var tfoot = document.createElement("tfoot");
container.innerHTML = '';
var thBody = '<tr><th>Meal</th><th>Price</th></tr>';
thead.innerHTML = thBody;
// tbody
_totalPayment = 0;
_ItemsInCart.forEach(function(item) {
_totalPayment += parseInt(item.price);
var tBodyTemp = '<tr><td>'+item.title+'</td><td>€ '+item.price+'</td></tr>';
tbody.innerHTML += tBodyTemp;
});
// tfoot
var tfootBody = '<tr><td>Total</td><td>€ '+_totalPayment+'</td></tr>';
tfoot.innerHTML = tfootBody;
table.appendChild(thead);
table.appendChild(tbody);
table.appendChild(tfoot);
container.appendChild(table);
// open modal
document.getElementById('cart').style.display = "block";
}
// proceed to checkout
function proceedToCheckout() {
document.getElementById('cartoverview').classList.add('hidden');
document.getElementById('personalinformation').classList.remove('hidden');
}
// validate form submit
function validatepersonalInfoForm() {
document.getElementById('personalinformation').classList.add('hidden');
document.getElementById('confirmation').classList.remove('hidden');
// set values
var val = document.querySelector('input[name="paymentmethod"]:checked').value;
document.getElementById('price').innerHTML = '€ '+_totalPayment;
document.getElementById('paymentmethod').innerHTML = 'in '+val;
}
function setRandomItem() {
var max = _MEALS.length;
var min = 0;
var number = Math.floor(Math.random() * (max - min + 1)) + min;
var item = _MEALS[number];
document.getElementById('mealofthedayimg').src = 'images/'+item.img;
}
// listen on click event for order button
document.body.addEventListener("click", function (event) {
// close modal box
if (event.target.classList.contains("close")) {
document.getElementById('cart').removeAttribute('style');
document.getElementById('popup').removeAttribute('style');
// remove classes from element
document.getElementById('cartoverview').classList.remove('hidden');
document.getElementById('personalinformation').classList.add('hidden');
document.getElementById('confirmation').classList.add('hidden');
}
// open modal box
if (event.target.classList.contains("orderBtn")) {
event.preventDefault();
showModal(event.target.getAttribute("id"));
}
// add item in cart
if (event.target.classList.contains("placeOrderInCart")) {
event.preventDefault();
var item = JSON.parse(event.target.getAttribute("data-item"));
if (item) {
addItemInCart(item);
}
}
});
setTimeout( function() {
// console.log(_MEALS);
makeTemplateFromArray(_MEALS);
prepareOptions(_MEALS[0]);
setRandomItem();
}, 100);

After you add something into _ItemsInCart, set _ItemsInCart as data in localstorage.
Before you want to get something from _ItemsInCart, get data from localstorage first and set it to _ItemsInCart.
_ItemsInCart should always sync with your data in localstorage.
How to use localstorage:
https://www.w3schools.com/html/html5_webstorage.asp
Advice: If possible, separate your DOM manipulating code with your logic code.

How to detect joy-con input/motion controls in HTML5 JavaScript

I am trying to create an HTML5 JavaScript game that uses Nintendo Switch Joy-Cons and motion controls. The problem is, I don't know how to detect motion controls from Joy-Cons when they are connected to my PC.
I've managed to achieve button inputs with Xbox controllers, PS4, and Joy Con using Gamepad API, but is it possible to do so with Joy-Con motion controls?
Here is the code for Gamepad API if you want to see it(Again, I'm aiming for Joy-Con motion controls):
var haveEvents = 'ongamepadconnected' in window;
var controllers = {};
function connecthandler(e) {
addgamepad(e.gamepad);
}
function addgamepad(gamepad) {
controllers[gamepad.index] = gamepad;
var d = document.createElement("div");
d.setAttribute("id", "controller" + gamepad.index);
var t = document.createElement("h1");
t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
d.appendChild(t);
var b = document.createElement("div");
b.className = "buttons";
for (var i = 0; i < gamepad.buttons.length; i++) {
var e = document.createElement("span");
e.className = "button";
//e.id = "b" + i;
e.innerHTML = i;
b.appendChild(e);
}
d.appendChild(b);
var a = document.createElement("div");
a.className = "axes";
for (var i = 0; i < gamepad.axes.length; i++) {
var p = document.createElement("progress");
p.className = "axis";
//p.id = "a" + i;
p.setAttribute("max", "2");
p.setAttribute("value", "1");
p.innerHTML = i;
a.appendChild(p);
}
d.appendChild(a);
var start = document.getElementById("start");
if (start) {
start.style.display = "none";
}
document.body.appendChild(d);
requestAnimationFrame(updateStatus);
}
function disconnecthandler(e) {
removegamepad(e.gamepad);
}
function removegamepad(gamepad) {
var d = document.getElementById("controller" + gamepad.index);
document.body.removeChild(d);
delete controllers[gamepad.index];
}
function updateStatus() {
if (!haveEvents) {
scangamepads();
}
var i = 0;
var j;
for (j in controllers) {
var controller = controllers[j];
var d = document.getElementById("controller" + j);
var buttons = d.getElementsByClassName("button");
for (i = 0; i < controller.buttons.length; i++) {
var b = buttons[i];
var val = controller.buttons[i];
var pressed = val == 1.0;
if (typeof(val) == "object") {
pressed = val.pressed;
val = val.value;
}
var pct = Math.round(val * 100) + "%";
b.style.backgroundSize = pct + " " + pct;
if (pressed) {
b.className = "button pressed";
//Pressed down code here
} else {
b.className = "button";
//Release button code here
}
}
var axes = d.getElementsByClassName("axis");
for (i = 0; i < controller.axes.length; i++) {
var a = axes[i];
a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
a.setAttribute("value", controller.axes[i] + 1);
}
}
requestAnimationFrame(updateStatus);
}
function scangamepads() {
var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
for (var i = 0; i < gamepads.length; i++) {
if (gamepads[i]) {
if (gamepads[i].index in controllers) {
controllers[gamepads[i].index] = gamepads[i];
} else {
addgamepad(gamepads[i]);
}
}
}
}
window.addEventListener("gamepadconnected", connecthandler);
window.addEventListener("gamepaddisconnected", disconnecthandler);
if (!haveEvents) {
setInterval(scangamepads, 500);
}
Using this link for reference

Wei Gao explained this in a React Knowledgeable meetup last week.
You can learn how she did it through her presentation or her slides.
You can visit the talk page for more information.

Why is my local storage not working?

Each user can dynamically create a table from a form. I am trying to save the table and its current state to local storage every time a change is made or the person exits the page. Name stores the name of the user and I am using it as a key. However, it is not working for me. I think I am saving the data when I need to using the saveData function and parsing it when I need to with the showData function. Can anyone tell me where I am going wrong please?
userDiv.onclick=(function() {
alert($(this).attr("id"));
name= $(this).attr("id");
window.location.href = "Createtask.html";
showData();//TRYING TO SHOW THE USER'S TABLE WHEN PAGE OPENS
}
function makeChart() {
table = document.createElement('table');
var taskName = document.getElementById('taskname').value,
header = document.createElement('th'),
numDays = document.getElementById('days').value, //columns
howOften = document.getElementById('times').value, //rows
row,
r,
col,
c;
var counter = 0;
var target = numDays * howOften;
var cel = null;
var myImages = new Array();
myImages[0] = "http://www.olsug.org/wiki/images/9/95/Tux-small.png";
myImages[1] = "http://a2.twimg.com/profile_images/1139237954/just-logo_normal.png";
var my_div = document.createElement("div");
my_div.id = "showPics";
document.body.appendChild(my_div);
var newList = document.createElement("ul");
my_div.appendChild(newList);
if (taskName == '' || numDays == '') {
alert('Please enter task name and number of days');
}
if (howOften == '') {
howOften = 1;
}
if (taskName != '' && numDays != '') {
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i];
allImages.onclick = function (e) {
if (sel !== null) {
sel.src = e.target.src;
my_div.style.display = 'none';
sel.onclick = null;
counter++;
sel = null;
if (counter == target) {
alert("Show some fireworks "+name+" gets a reward");
}
}
};
var li = document.createElement('ul');
li.appendChild(allImages);
newList.appendChild(li);
}
my_div.style.display = 'none';
header.innerHTML = taskName;
table.appendChild(header);
function addImage(col) {
var img = new Image();
img.src = "http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png";
col.appendChild(img);
img.onclick = function () {
my_div.style.display = 'block';
sel = img;
saveData();
};
}
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
addImage(col);
}
}
document.getElementById('theRealHoldTable').appendChild(table);
document.getElementById('createChart').onclick = null;
saveData();/CALLING THE LOCAL STORAGE WHEN TABLE IS CREATED
}
}
function saveData(){
localStorage.setItem(name, JSON.stringify(table.innerHTML));
}
function showData(){
JSON.parse(localStorage.getItem( name ));
}

you are trying to stringify html-markup, which is not working! you are only able to JSON.stringify an js-object which means an instance of a class, an object literal or an array:
// this works because it is an instance
var objInstance = new SomeClass();
JSON.stringfy(objInstance);
// this works as it is an object-literal
var objLiteral = { mykey: 'myvalue' };
JSON.stringfy(objLiteral);
// this works as it is an array
var arr = [1, 2, 3]
JSON.stringfy(arr);
// THIS DOES NOT WORK!!!
JSON.stringify('<div>...</div>');
just strip the JSON.stringify part of your methods, that should work because element.innerHTML already returns a string:
function saveData(){
localStorage.setItem(name, table.innerHTML);
}
function showData(){
localStorage.getItem(name);
}