Why is my JavaScript If statement not working?

Question

I have been trying for a good minute to figure out why my if statement never triggers. Any help would be much appreciated!

var clickcounter = 0;
var buttonclicker = document.getElementById("buttonclicker");

function unblur() {
    clickcounter = clickcounter + 1;
    console.log(clickcounter);
}

if (clickcounter === 1) {
    buttonclicker.textContent = "Unlock More";
    alert(clickcounter);
}

the variable clickcounter will be equal to or over 1. I at first tried using if (clickcounter => 1) and also tried if (clickcounter > 0) but none of this worked. What am I doing wrong? Here is a codepen of the whole thing: https://codepen.io/sage379/pen/JyppZv

You set clickcounter to 0 and then check if it's equal to 1. It's not 1, it's 0. Because it was just set to 0. — David
– David, Commented Aug 18, 2017 at 17:55
unblur is called by an onClick function, I left a lot of the code out, my mistake. codepen.io/sage379/pen/JyppZv is a codepen of the whole thing — user3161849
– user3161849, Commented Aug 18, 2017 at 18:10
@user3161849: Yes, but unblur isn't called until something else calls it. Whereas your if statement executes immediately. Did you mean to put the if statement in the unblur function? — David
– David, Commented Aug 18, 2017 at 18:19

Maximilian Burszley · Accepted Answer · 2017-08-18 17:55:06Z

1

Based on your code example, unblur() never gets called so clickcounter remains 0.

answered Aug 18, 2017 at 17:55

Maximilian Burszley

19.9k7 gold badges39 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Octopus Over a year ago

and even if unblur does get called, the conditional has already tested the state of clickcounter so its too late.

user47589 Over a year ago

@Octopus assuming that the code is written as it appears in the question. Sometimes users copy a few lines here, a few lines there, and put it all together in the question without realizing how much context they're throwing out. This was how I interpreted the code in the question.

user3161849 Over a year ago

I should've specified, unblur() is called.. and I know the variable is changed because I made it console.log the value of clickcounter.. here is a codepen of it: codepen.io/sage379/pen/JyppZv

Ricktron3000 Over a year ago

Sure, you change clickcounter when you click the button but you never run that if statement again after that. Your code does the following: Set clickcounter to 0, check if clickcounter === 1. Then your function changes click counter and that's all your code does. You could call a function from within unblur that checks if clickcounter === 1 but currently you just increment the value and do nothing with it.

Jayesh Goyani · Accepted Answer · 2017-08-18 18:25:54Z

0

Please try with the below code snippet. Let me know if i did not understand your requirement.

var clickcounter = 0;
var buttonclicker = document.getElementById("buttonclicker");

       function unblur() {

            clickcounter = clickcounter + 1;
            console.log(clickcounter);


             if (parseInt(clickcounter) >= 1){
                  buttonclicker.textContent = "Unlock More";

             }
        }

answered Aug 18, 2017 at 18:25

Jayesh Goyani

11.2k11 gold badges32 silver badges50 bronze badges

Comments

Assafi Cohen-Arazi · Accepted Answer · 2017-08-18 18:30:42Z

0

Put your if statement inside of unblur:

var clickcounter = 0; 
var buttonclicker = document.getElementById("buttonclicker");
function unblur() {
 clickcounter = clickcounter + 1;
 console.log(clickcounter);
 if (clickcounter === 1) {
    buttonclicker.textContent = "Unlock More"; 
    alert(clickcounter);
 }
}

answered Aug 18, 2017 at 18:30

Assafi Cohen-Arazi

84711 silver badges30 bronze badges

Comments

Ricktron3000 · Accepted Answer · 2017-08-18 18:31:26Z

The problem is that once you increment clickcounter, you never check if it's changed. That check is performed once in your script, immediately after setting clickcounter = 0.

Here is an example where I've wrapped that check in a new function called checkClickCounter(). This function is called in unblur() each time it is called by your button click. I changed your if statement back to >= but since you're incrementing by one it will always return true after one click using === so this change doesn't matter in your current code.

var clickcounter = 0;
var buttonclicker = document.getElementById("buttonclicker");

function unblur() {
    clickcounter = clickcounter + 1;
    checkClickCounter(clickcounter);
}

function checkClickCounter(count){
    if (count >= 1) {
        buttonclicker.textContent = "Unlock More";
        //alert(clickcounter);
    }
}

Collectives™ on Stack Overflow

Why is my JavaScript If statement not working?

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related