How to make input (picture) visible after reaching some score?

Question

I have code (some kind of clicker game) that should show you next button (image) after reaching some score (in this example 10) and this button (image) gives you more points then previous one etc. My problem is that I cant make my second button (image) to appear.

var score_count = 0
var pic1 = document.getElementsByClassName('btn1');
var pic2 = document.getElementsByClassName('btn2');

function addToScore(amount) {
  score_count = score_count + amount;
  document.getElementById('score_count').innerHTML = score_count;

}

if (score_count >= 10) {
  pic2.style.visibility = 'visible';
}

.score {
  font-size: 40px;
}

.btns:active {
  transform: scale(0.98);
  box-shadow: 3px 2px 22px 1px rgb(0, 0, 0, 0.24);
}

.btn2 {
  visibility: hidden;
}



Score: 0

khadkamhn · Answer

Your selector indicates all class i.e. btn2.
Either you must use getElementById method or select the first element by using pic2[0].
In addition, your if condition should be inside of addToScore function.

var score_count = 0
var pic1 = document.getElementsByClassName('btn1');
var pic2 = document.getElementsByClassName('btn2');

function addToScore(amount) {
    score_count = score_count + amount;
    document.getElementById('score_count').innerHTML = score_count;
        if (score_count >=10) {
      pic2[0].style.visibility = "visible";
  }
}

.score{
    font-size: 40px;
}
.btns:active{
    transform: scale(0.98);
    box-shadow: 3px 2px 22px 1px rgb(0, 0, 0, 0.24);
}
.btn2 {
  visibility: hidden;
}

Score: 0

Axel Bozzola · Answer

This happens because the evaluation of the conditional occurs only when the script is first loaded. One way to solve it is to move this block:

if (score_count >=10) {
    pic2.style.visibility = 'visible';
}

inside the addToScore function, that way it's going to evaluate it every time the score updates.

I believe you're just starting out with JS, otherwise I'll tell you a better solution would be to work with events. Inside your addToScore function, you can trigger an event when score_count is greater or equal to 10, and then declare the event listener, learning it this way grants you a better understanding of what you can achieve with javascript.

UmairFarooq · Answer

the if condition needs to be inside the function & i assume you want to hide the first button after that.so thats what i did & i changed document.getElementsByClassName with document.getElementById.because with document.getElementsByClassName you will get an array of objects in that case you have pass an index for.eg

var pic1 = document.getElementsByClassName('pic1')[0];

var score_count = 0
var pic1 = document.getElementById('pic1');
var pic2 = document.getElementById('pic2');

function addToScore(amount) {
    score_count = score_count + amount;
    document.getElementById('score_count').innerHTML = score_count;
    
    if (score_count >=10) {
    pic2.style.visibility = 'visible';
    pic1.style.visibility = 'hidden';
}

}

.score{
    font-size: 40px;
}
.btns:active{
    transform: scale(0.98);
    box-shadow: 3px 2px 22px 1px rgb(0, 0, 0, 0.24);
}

.btn2{
    visibility: hidden;
}




    
    
    Score
    



    

    Score: 0

How to make input (picture) visible after reaching some score?

3 Answers