Else statement not working

JavaScript
#1

I am trying to toggle the display content of the page as well as the text on the button when the button is clicked. The if part of the statement works but not the else. Tried lots of different ways but still don’t understand why it’s not working?

let showBtn = document.querySelector('.timer-button');
showBtn.textContent = 'Break Timer'
function showTimer() {
    if(showBtn.textContent) {
        console.log('pressed 1')
        sectionTwo.style.display = 'block';
        sectionOne.style.display = 'none';
        showBtn.textContent = 'Work Timer';
    } else if(showBtn.textContent !== 'Break Timer') {
        console.log('pressed 2')
        sectionTwo.style.display = 'none';
        sectionOne.style.display = 'block';
        showBtn.textContent = 'Break Timer';
    }
}
showBtn.addEventListener('click', showTimer);
#2

Hello there,

The only time this will not run is when showBtn.textContent is equal to a false value like an empty string.

So, this condition, below, does not make much sense as an if else:

As, the execution will never reach this else if statement, if showBtn.textContent = 'Break Timer' anyway.

So, in terms of why that block is never running will depend on some more code. Do you have a link to a CodePen with more code or similar? With the code I can see:

There is never a case where the first if will not run.

Hope this helps

1 Like
#3

Thanks - here is my codepen: https://codepen.io/chunzg/pen/ExNEvqE

Can you explain why there is never a case the first if will not run? Even if write the below, it still doesn’t work… but why - the text content should have changed?

if(showBtn.textContent = 'Break Timer')
...

else if(showBtn.textContent = 'Work Timer')
#4

that doesn’t work because you are using the assignment operator = instead of the comparison operator == or ===

1 Like
#5

I tried that but it still doesn’t work - actually the text doesn’t even appear on the button if I use === ? I am so confused…
Codepen here: https://codepen.io/chunzg/pen/ExNEvqE

#6

not here:

there you want the assignment operator, I think, if that’s what you want to assign to showBtn.textContent

1 Like
#7

I think you are confused between = and ==.
Assignment tutorial.
Comparison tutorial.

1 Like
#8

Yeah it still doesn’t work :frowning:

#9

Either you didn’t update the Codepen or you are still not doing an assignment = where you should be.

You need to update the button text by assigning it the new string value.

showBtn.textContent = 'Work Timer';
showBtn.textContent = 'Break Timer';

1 Like
#10

Thank you, it worked now. Ok the logic of that is unnecessary confusing :joy:

#11

Yes, at first the assignment and comparison syntax can be a little confusing (some languages intentionally have chosen to not use the same symbol for the two) and even veteran coders sometimes get bitten by the syntax.

One thing that can help is to always use the strict equality === that way not only will you be less likely to mistype but they are also visually more different (=== and =).

1 Like
#12

Thanks all for the help. Glad it is working now :laughing: