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

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

<script src="script.js" type="text/javascript"></script>

<p >Score: <span id="score_count">0</span></p>

<input id="pic1"  type="Image" name="Image1" src="imgs/pic1.jpg" height="256px" width="256px" onclick="addToScore(1)">

<input id="pic2"  type="Image" name="Image2" src="imgs/pic2.jpg" height="256px" width="256px" onclick="addToScore(5)">

CodePudding user response：

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

<p >Score: <span id="score_count">0</span></p>

    <input id="pic1"  type="Image" name="Image1" src="imgs/pic1.jpg" height="256px" width="256px" onclick="addToScore(1)">

    <input id="pic2"  type="Image" name="Image2" src="imgs/pic2.jpg" height="256px" width="256px" onclick="addToScore(5)">

CodePudding user response：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Score</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <script src="script.js" type="text/javascript"></script>

    <p >Score: <span id="score_count">0</span></p>

    <input id="pic1"  type="Image" name="Image1" src="imgs/pic1.jpg" height="256px" width="256px" onclick="addToScore(1)">

    <input id="pic2"  type="Image" name="Image2" src="imgs/pic2.jpg" height="256px" width="256px" onclick="addToScore(5)">

</body>
</html>

CodePudding user response：

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 gonna 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 you can trigger an event when score_count is greater or equals to 10, and then declare the event listener, learning it this way grants you a better understanding of what you can achieve with javascript.