Javascript “if” statement does not work
Question
I'm new to programming with Javascript. I've been trying fixing this "if" statement for hour. I don't see any proplem with it. Please have a look and tell me what's wrong!
<!DOCTYPE HTML> <HTML> <body> <head> <style> button { font-size:14px } button.hide { display:none } </style> <title>Candy Box REMAKE</title> <script type="text/javascript"> var candies = 0; function addCandies() { candies ++; document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; }; function add10Candies() { candies += 10; document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; }; function throwCandies() { candies -= 10; document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; }; if (candies >= 30) { document.getElementById('add10Candies').style.display = "block"; }; </script> <p id="numberOfCandies">You got 0 candy</p> <button onclick="addCandies()">Get a candy.</button> <button onclick="throwCandies()">Throw 10 candies away. <button class="hide" id="add10Candies" onclick="add10Candies">Get 10 candies.</button> </body> </HTML>
So this part:
if (candies >= 30) {
document.getElementById('add10Candies').style.display = "block";
};
doesn't work (show the hidden button) when i get enough candies.
7 answers
solution1
4 2016-12-21 10:50:31
put your if statement in each function. At the moment it only runs once, when the page loads.
solution2
2 2016-12-21 10:52:22
The issue is that this if check runs only once when you load the page. A possible solution would be to create a checkCandies() function that is called within all the other functions:
var candies = 0;
function addCandies() {
candies ++;
document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
checkCandies();
};
function add10Candies() {
candies += 10;
document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
checkCandies();
};
function throwCandies() {
candies -= 10;
document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
checkCandies();
};
function checkCandies() {
if (candies >= 30) {
document.getElementById('add10Candies').style.display = "block";
};
}
solution3
1 ACCPTED 2016-12-21 10:52:35
Put your code in a function:
function checkCandiesQuantity() {
if (candies >= 30) {
document.getElementById('add10Candies').style.display = "block";
} else {
document.getElementById('add10Candies').style.display = "none";
}
}
Call it when you update the quantity:
function addCandies() {
candies ++;
document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
checkCandiesQuantity();
};
function add10Candies() {
candies += 10;
document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
checkCandiesQuantity();
};
function throwCandies() {
candies -= 10;
document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
checkCandiesQuantity();
};
solution4
1 2016-12-21 11:04:39
I've add checkIs30Candies() function. Also have changed style to style.display = "inline-block" (in you case it have to be inline-block, I suppose)
And you had a typo
<button class="hide" id="add10Candies" onclick="add10Candies">Get 10 candies.</button>
It should be onclick="add10Candies()", with braces to invoke a function
<!DOCTYPE HTML> <HTML> <body> <head> <style> button { font-size:14px } button.hide { display:none } </style> <title>Candy Box REMAKE</title> <script type="text/javascript"> var candies = 0; function checkIs30Candies() { if (candies >= 30) { document.getElementById('add10Candies').style.display = "inline-block"; } else { document.getElementById('add10Candies').style.display = "none"; } } function addCandies() { candies ++; document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; checkIs30Candies(); }; function add10Candies() { candies += 10; document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; }; function throwCandies() { candies -= 10; document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies."; checkIs30Candies(); }; </script> <p id="numberOfCandies">You got 0 candy</p> <button onclick="addCandies()">Get a candy.</button> <button onclick="throwCandies()">Throw 10 candies away. <button class="hide" id="add10Candies" onclick="add10Candies()">Get 10 candies.</button> </body> </HTML>
solution5
0 2016-12-21 10:52:33
You should put the if statement in other functions that change candies amount.
function addCandies() {
candies ++;
document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
checkCandies();
}
function add10Candies() {
candies += 10;
document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
checkCandies();
}
function throwCandies() {
candies -= 10;
document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
checkCandies();
}
function checkCandies() {
if (candies >= 30) {
document.getElementById('add10Candies').style.display = "block";
}
}
solution6
0 2016-12-21 10:57:35
You need to add this code
if (candies >= 30) {
document.getElementById('add10Candies').style.display = "block";
};
in each of the functions you have defined.
What is happening right now :
Step 1 :
var candies = 0;
Step 2 :
<declarations of functions>
Step 3 :
if (candies >= 30) {
document.getElementById('add10Candies').style.display = "block";
};
So after initialization and function declarations, the control directly passes to your if condition and since candies = 0 nothing happens.
When you call any of these functions, the function executes but since the if condition is outside the function, it is not executed.
solution7
0 2016-12-21 10:59:41
Perhaps one simpler way to write this is (there are also increasing levels of 'simpler' as well). Reuse the common bits of code when you can.
PS: I fixed what I assumed to be a grammatical error in the message:
<script type="text/javascript">
var candies = 0;
function updateCandies() {
var e = document.getElementById('numberOfCandies');
e.innerHTML = "You [edit:] have " + candies + " candies.";
e.style.display = candies>=30 ? "block" : "none";
}
function addCandies() {
candies ++;
updateCandies();
};
function add10Candies() {
candies += 10;
updateCandies();
};
function throwCandies() {
candies -= 10;
updateCandies();
};
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.