How to listen to a "count" variable change and trigger actions depending on its value

Question

I have a counter on a web page and I would like to change an element's style depending on the value of my count variable.

I found the.change action but can't figure how to make it work. It may be not a suited solution.

Could you help?

 var count = 0; counter.innerHTML = count + "/30"; document.getElementById("button").onclick = function() { count++; counter.innerHTML = count + "/30"; } $(count).change(function(){ var x = document.getElementById("changed"); if (count >= 5) { x.style.color = "red"; }})

 <div id="counter"> Counter </div> <div id="button">Click to add 1 </div> <div id="changed">This must turn red when counter > 5 </div>

Answer 1

Since the counter is only updated by your code, you can directly add the check after you increment the count.

 var count = 0; counter.innerHTML = count + "/30"; var x = document.getElementById("changed"); document.getElementById("button").onclick = function() { count++; if (count >= 5) { x.style.color = "red"; } counter.innerHTML = count + "/30"; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="counter"> Counter </div> <div id="button">Click to add 1 </div> <div id="changed">This must turn red when counter >= 5 </div>

If you are incrementing the counter in multiple places, you can use a function to encapsulate the updating and checking of the value.

 var count = 0; counter.innerHTML = count + "/30"; var x = document.getElementById("changed"); document.getElementById("button").onclick = function() { updateCount(1); counter.innerHTML = count + "/30"; } function updateCount(inc){ count += inc; if (count >= 5) { x.style.color = "red"; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="counter"> Counter </div> <div id="button">Click to add 1 </div> <div id="changed">This must turn red when counter >= 5 </div>

Answer 2

As mentioned, you cannot "react" to variable changes (unless they're properties of an object, in which case you could define a setter that reacts in the way you need).

Instead, just check the variable in those places where they are changed:

 let count = 0; const counter = document.getElementById("counter"); counter.textContent = count + "/30"; function incrementCount() { count++; } function updateCounter() { counter.textContent = count + "/30"; } function checkCounterGreaterThanFour() { if (count >= 5) { document.getElementById("changed").style.color = "red"; } } document.getElementById("button").addEventListener('click', incrementCount); document.getElementById("button").addEventListener('click', updateCounter); document.getElementById("button").addEventListener('click', checkCounterGreaterThanFour);

 <div id="counter"></div> <button type="button" id="button">Click to add 1</button> <div id="changed">This must turn red when counter > 5</div>

Things I've changed on top of those mentioned:

• changed var to either let or const . var isn't used any more unless you need its very specifics
• changed div#button to a real button element for better semantics
• properly defined all variables using document.getElementById . I know all elements with a unique id are available as global variables in the browser, but code should never rely on that as any other part of the code could have modified/overwritten those
• changed button.onclick =... to button.addEventListener('click', ... . Preferrably always use addEventListener which allows to add as many listeners as you want, whereas onclick property can always only reference one handler
• split the click into three functions for re-use. Event listeners, when the event occurs, will be run in the order they have been added by the code.

Answer 3

Consider the following jQuery example.

 $(function() { var count = 0; $("#button").click(function() { $("#counter").html("Counter: " + ++count + "/30"); if (count > 5) { $("#changed").css("color", "red"); } }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="counter">Counter</div> <div id="button">Click to add 1</div> <div id="changed">This must turn red when counter > 5</div>

If you prefer Native JS, consider the following.

 var count = 0; document.getElementById("button").addEventListener("click", function() { document.getElementById("counter").innerHTML = "Counter: " + ++count + "/30"; if (count > 5) { document.getElementById("changed").style.color = "red"; } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="counter">Counter</div> <div id="button">Click to add 1</div> <div id="changed">This must turn red when counter > 5</div>

Each of these assigns a click event to the button element. Then it's a matter of examining the count variable each time the button is clicked and using a conditional statement to perform the change.

If you have many buttons, move the details to their own function so each button can call the function.

function updateCount(){
  $("#counter").html("Counter: " + ++count + "/30");
  if (count > 5) {
    $("#changed").css("color", "red");
  }
}

The click callback can just call this function from any button.

$("#button").click(updateCount);

Or

document.getElementById("button").addEventListener("click", updateCount);