event handler is not changing the variable. [closed]

  • A+
Category:Languages

I want to change a javascript variable by clicking on an anchor link, and then display different information depending on that variable. Here it does not matter which anchor I click, in both cases the innerHTML comes back saying that the number selected was one. I've read about garbage collection in javascript where a previously assigned variable value will be replaced and it seemed like a good way to do this sort of thing. But that aside, the first issue I'm having is that the variable does not seem to be changing. New to this stuff, thanks much!

<html> <head> <style>     .selectOne {         font-size: 20px;     }     .selectTwo {         font-size: 20px;     }     .displayNumber {         font-size: 20px;     } </style> </head> <body>  <a href="#" class="selectOne">Apply One</a> <br> <a href="#" class="selectTwo">Apply Two</a> <div class="displayNumber">Number will display here.</div>  <script>      const selectOne = document.querySelector(".selectOne");     const selectTwo = document.querySelector(".selectTwo");     const displayNumber = document.querySelector(".displayNumber");      var number;      function applyNumberOne () {         number = "one";     }     selectOne.addEventListener("click", applyNumberOne);      function applyNumberTwo () {         number = "two";     }     selectTwo.addEventListener("click", applyNumberTwo);      function showNumber () {         if (number = "one") {             displayNumber.innerHTML = "<p>The number selected was one.</p>";         } else if (number = "two") {             displayNumber.innerHTML = "<p>The number selected was two.</p>";         }     }     selectOne.addEventListener("click", showNumber);     selectTwo.addEventListener("click", showNumber);  </script> </body> </html> 

 


In your code:

  • number = "one" is an assignment

It should be:

  • number == "one" comparing variable number value
  • Or number === "one" to more strict comparing also the type of the variable

But, in your code you do not need to do comparison

Code refactor:

function showNumber () {   displayNumber.innerHTML = `<p>The number selected was ${number}.</p>`; } 

Working code example:

const selectOne = document.querySelector('.selectOne'); const selectTwo = document.querySelector('.selectTwo'); const displayNumber = document.querySelector('.displayNumber');  let number;  function applyNumberOne() {   number = 'one'; } selectOne.addEventListener('click', applyNumberOne);  function applyNumberTwo() {   number = 'two'; } selectTwo.addEventListener('click', applyNumberTwo);  function showNumber() {   displayNumber.innerHTML = `<p>The number selected was ${number}.</p>`; } selectOne.addEventListener('click', showNumber); selectTwo.addEventListener('click', showNumber);
.selectOne {   font-size: 20px; }  .selectTwo {   font-size: 20px; }  .displayNumber {   font-size: 20px; }
<a href="#" class="selectOne">Apply One</a> <br> <a href="#" class="selectTwo">Apply Two</a> <div class="displayNumber">Number will display here.</div>

Here is a new version of your code, but refactoring CSS and JavaScript:

const elems = document.querySelectorAll('.selectOne, .selectTwo'); const displayNumber = document.querySelector('.displayNumber'); const getNumberFrom = { selectOne: 'one', selectTwo: 'two' };  elems.forEach(el => el.addEventListener('click', e => displayNumber.innerHTML = `The number selected was ${getNumberFrom[e.target.className]}.`));
.selectOne, .selectTwo, .displayNumber {   font-size: 20px; }
<a href="#" class="selectOne">Apply One</a> <br> <a href="#" class="selectTwo">Apply Two</a> <div class="displayNumber">Number will display here.</div>

Hope it helps

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: