I have a problem with if statement in javaScript

Question

I want to check if the state of show to change the innerText of the button according to it but when I run it the else statment doesnt work

let showBtn = document.querySelector('.show-more');

showBtn.onclick = function () {
    let show = false;
    if (show === false) {
        showBtn.innerText = 'Show Less';
        show = true;
    } else {
        showBtn.innerText = 'Show more';
    }
}

Move the declaration of `show` outside your function, and change `show` back to `false` in the `else` — FZs, Jul 05 '20 at 20:56
when you ask a question it helps to tell us: are you getting an error message or unexpected behavior? — Andrew, Jul 05 '20 at 21:18

sonEtLumiere · Answer 1 · 2020-07-05T21:02:45.100

0

Reset the value of show, every click by this way.

let showBtn = document.querySelector('.show-more');
show = false;

showBtn.onclick = function () {

    if (show === false) {
        showBtn.textContent= 'Show Less';
        show = true;
    } else {
        show = false
        showBtn.textContent= 'Show more';
    }
}

edited Jul 05 '20 at 21:02

answered Jul 05 '20 at 20:55

sonEtLumiere

4,461
3
8
35

score 0 · Accepted Answer · answered Jul 05 '20 at 20:59

0

showBtn is false on each click in your code. It should not be assigned in the onclick handler. Try this:

let showBtn = document.querySelector('.show-more');
let show = false;

showBtn.onclick = function() {
  if (show === false) {
    showBtn.innerText = 'Show Less';
  } else {
    showBtn.innerText = 'Show more';
  }
  show = !show;
}

<button class="show-more" />Show</button>

answered Jul 05 '20 at 20:59

SLePort

15,211
3
34
44

Aaand what happens if you have more then one button present? – max Jan 05 '23 at 16:06
@max You can just change the selector in `querySelector` to target the button you want to add the `onclick` event on. – SLePort Jan 05 '23 at 19:28

max · Answer 3 · 2023-01-05T16:11:41.443

You should not even be using a variable here in the first place. The accepted answer just creates a new bug as it will break as soon as you have more then one element as the global state would apply to all the elements.

If you want to attach state to elements you can either do it by adding/removing classes or through data attributes (or whatever more specific attribute is applicable).

let showBtn = document.querySelector('.show-more');

showBtn.onclick = function (event) {
   // event.target is the clicked element
   if (event.target.matches('.expanded')) {
     showBtn.textContent= 'Show Less';
   else {
     showBtn.textContent= 'Show more';
   }
   event.target.classList.toggle('expanded')
}

In this example the class 'expanded' is used to keep track of the state of the button. This also lets you attach different visual "states" through CSS.

Andrew · Answer 4 · 2020-07-05T22:09:31.313

In this case do not assign your state variable let show inside of the calling function. When you do that it will initialize the variable every time you call it. This causes a performance issue (see variable initialization and garbage collection) and depending on what you want to do it will break.

Someone here as already given an answer, but in their answer the variable declaration is in global scope. Most people agree that it's not a good idea to declare global variables, especially with such a general name as show . Later on, as your code base grows, you're likely to run into conflicts and your code will start acting in ways you can't predict. This is probably the most universally agreed upon coding convention. It's a bad habit. Learn how to do it the right way now.

These two StackOverflow answers contain examples that are a good starting point to producing working modular code to control the state of your objects:

wrapper function: https://stackoverflow.com/a/50137216/1977609

This is another way to implement your button: https://stackoverflow.com/a/10452789/1977609

I have a problem with if statement in javaScript

4 Answers4