Live Update in JavaScript

Question

I have a random increase for a bunch of variables, I used setIntervel() to have something like a live update for the variables but they don't seem to update:

 const no= document.getElementById("no");
 const ni= document.getElementById("no");
 const nu= document.getElementById("no");
 const ny= document.getElementById("no");
 const nt= document.getElementById("no");
 const visit = document.getElementById("visited");
 let a = sessionStorage.getItem("a") ? parseInt(sessionStorage.getItem("a")) : 1;
 let b = sessionStorage.getItem("b") ? parseInt(sessionStorage.getItem("b")) : 1;
 let x = sessionStorage.getItem("x") ? parseInt(sessionStorage.getItem("x")) : 1;
 let y = sessionStorage.getItem("y") ? parseInt(sessionStorage.getItem("y")) : 1;
 let z = sessionStorage.getItem("z") ? parseInt(sessionStorage.getItem("z")) : 1;
 let display;
 no.onclick = function(){
 sessionStorage.setItem("a", a + 1);
 window.location.href = "no.html";
 }
 ni.onclick = function(){
 sessionStorage.setItem("b", b + 1);
 window.location.href = "ni.html";
 }
 nu.onclick = function(){
 sessionStorage.setItem("x", x + 1);
 window.location.href = "nu.html";
 }
 ni.onclick = function(){
 sessionStorage.setItem("y", y + 1);
 window.location.href = "ny.html";
 }
 nt.onclick = function(){
 sessionStorage.setItem("z", z + 1);
 window.location.href = "nt.html";
 }
 function update(){
 if(a > b && a > x && a > y && a > z){
 display = "Popular Now: no";
 visit.textContent = display;
 }
 else if(b > a && b > x && b > y && b > z){
 display = "Popular Now: ni";
 visit.textContent = display;
 }
 else if(x > a && x > b && x > y && x > z){
 display = "Popular Now: nu";
 visit.textContent = display;
 }
 else if(y > a && y > b && y > x && y > z){
 display = "Popular Now: ny";
 visit.textContent = display;
 }
 else if(z > a && z > b && z > x && z > y){
 display = "Popular Now: nt";
 visit.textContent = display;
 }
 }
 setInterval(() => {
 let i = Math.floor(Math.random() * 5 + 1);
 if (i === 1) {
 sessionStorage.setItem("a", parseInt(sessionStorage.getItem("a") || 0) + 1);
 } else if (i === 2) {
 sessionStorage.setItem("b", parseInt(sessionStorage.getItem("b") || 0) + 1);
 } else if (i === 3) {
 sessionStorage.setItem("x", parseInt(sessionStorage.getItem("x") || 0) + 1);
 } else if (i === 4) {
 sessionStorage.setItem("y", parseInt(sessionStorage.getItem("y") || 0) + 1);
 } else {
 sessionStorage.setItem("z", parseInt(sessionStorage.getItem("z") || 0) + 1);
 }
 update();
 }, 5000);

The live update should occur right after the values increase meaning that it isn't using outdated values, yet I have to manually reload the page to see the change, and if anybody can offer a more random way of adding to the values I would like to know it, also don't mind the weird variable and button names, it is not something I would like to share online, Thanks.

I was expecting a live update for the popular now part

• deceze: Writing a new value to storage does not update the variables, which hold the values you read from storage earlier.
• Omar: @deceze, I don't really understand what you're saying but the variables do update according to session storage in application
• deceze: You read values from storage into variables once at the start of the script. Then later you write new values to storage. This won’t update the variables. But you're updating your site based only on the values in the variables, which won’t change by you writing to storage.
• connexo: If you want reactivity based on the values in storage, you'll have to implement this yourself. There is no built-in reactivity anywhere in JavaScript resp. the browser API.

Answer 1

Your fairly "verbose" code can be written a lot shorter if you leave out all the repetitions:

const btns=[...document.querySelectorAll("button")],
 highest=document.getElementById("highest");
btns.forEach(b=>b.onclick=()=>{
 b.textContent=+b.textContent+1;
 // sessionStorage.setItem(b.id,b.textContent);
 highest.textContent="The most popular button ID is "+btns.reduce((a,c)=>(+c.textContent>+a.textContent?c:a)).id
});
setInterval(()=>btns[Math.floor(btns.length*Math.random())].click(), 1000);

A<button id="na">1</button>
B<button id="nb">1</button>
X<button id="nx">1</button>
Y<button id="ny">1</button>
Z<button id="nz">1</button>
<div id="highest"></div>

The above snippet does not use local storage as this is neither supported on Stackoverflow nor is it useful for the action you require here. If you still want this feature, then you should uncomment the local storage command in the onclick function definition.

Maybe the expression

btns.reduce((a,c)=>(+c.textContent>+a.textContent?c:a)).id

deserves a short explanation: it uses the Array.reduce() method that loops over all elements of the btns array and compares each element's .textContent attribute value with the one in the accumulator variable a. Tha a variable is initially set to the first element of the btns array and is assigned the result of the ternary operator expression (+c.textContent>+a.textContent?c:a). So, if the current element's (c) value is higher than the one stored in a it will be assigned to a. At the end of the .reduce() loop the element stored in a is returned and its attribute .id is then used for the outer expression stating the most popular id.