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';
    }
}

Answer 1

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>

Answer 2

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'; } }

Answer 3

The if stateument doesn't work because you've set show to false already in the function. If you want the if statement to toggle, you need to somehow check / maintain the state of the button text. Below is one way to fix this problem

Pt2: You should be setting textContent, not innerText (this is an issue that I actually ran into myself rather recently)

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


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

Answer 4

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