How do I make it so that when my variable reaches a certain point, I have an alert popup saying something?
Question
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<title>John's Sustainability Clicker</title>
<style>
h1 { padding: 0; margin: 10px 0 0; }
p { padding: 0; margin: 10px; }
</style>
</head>
<script type="text/javascript">
if (clicks = 50) {
window.alert "You have made earth sustainable!"
} else {
document.write " "
}
</script>
<div style="color:#AF7817">
<center><h1 stlye="margin-bottom: 0 0 0 0"><p style="font-size:70px">My Sustainability Clicker</p></h1></center>
</div>
<div style="color:#2B65EC">
<div class="game-object">
<script type="text/javascript">
var clicks = 0;
function updateClickCount() {
document.getElementById("clickCount").innerHTML = clicks;
}
</script>
<center><button type="button" onClick="clicks++;updateClickCount();" id="push">
<p style="font-size:20px"><div style="color:#E238EC">Click me for Trees!</div></p></button></center>
<center> <p style="font-size:20px"><div id="clickCount"></div></p></center>
</div>
</div>
<div style="color:#F70D1A">
<center><p style="font-size:20px"><i><b>By: John Parkinham</i></b></p></center>
</div>
<center><input type="image" name="Cookie" value="Cookie" src="tree-clipart-tree_tiny_green_shaded.png" width="445px"/></center>
</input>
My question is, how do I have it so that when my clicks variable reaches 50, I get an alert message pop up on screen? I don't know if I should use the if else command or if I should use something else.
Thanks ~John
3 answers
solution1
0 ACCPTED 2015-03-26 06:17:45
You are on the right track, in thinking you will need an if statement. But where do you need an if statement. The current if (clicks = 50) has several issues.
First the single equals sign will assign the value 50 to the variable clicks. To compare two values and then return a true or false value you need to use ==
Second this block of code:
<script type="text/javascript">
if (clicks = 50) {
window.alert "You have made earth sustainable!"
} else {
document.write " "
}
</script>
Which will be run in your page before the variable clicks is first defined. The correct place to be checking the value of clicks is after each time that value is updated in your updateClickCount function
function updateClickCount() {
document.getElementById("clickCount").innerHTML = clicks;
if(clicks == 50)
{
alert("hurray 50!");
}
}
solution2
0 2015-03-26 06:19:01
<!DOCTYPE HTML>
<html>
<head>
<title>John's Sustainability Clicker</title>
<style>
h1 { padding: 0; margin: 10px 0 0; }
p { padding: 0; margin: 10px; }
</style>
</head>
<script type="text/javascript">
var clicks = 0;
function updateClickCount() {
clicks++;
document.getElementById("clickCount").innerHTML = clicks;
if (clicks == 50) {
alert( "You have made earth sustainable!");
}
}
</script>
<div style="color:#AF7817">
<center><h1 stlye="margin-bottom: 0 0 0 0"><p style="font-size:70px">My Sustainability Clicker</p></h1></center>
</div>
<div style="color:#2B65EC">
<div class="game-object">
<center><button type="button" onclick="updateClickCount();" id="push">
<p style="font-size:20px"><div style="color:#E238EC">Click me for Trees!</div></p></button></center>
<center> <p style="font-size:20px"><div id="clickCount"></div></p></center>
</div>
</div>
<div style="color:#F70D1A">
<center><p style="font-size:20px"><i><b>By: John Parkinham</i></b></p></center>
</div>
<center><input type="image" name="Cookie" value="Cookie" src="tree-clipart-tree_tiny_green_shaded.png" width="445px"/></center>
</input>
Edited...
solution3
0 2015-03-26 06:26:40
<!DOCTYPE HTML>
<html>
<head>
<title>John's Sustainability Clicker</title>
<style>
h1 { padding: 0; margin: 10px 0 0; }
p { padding: 0; margin: 10px; }
</style>
</head>
<script type="text/javascript">
</script>
<div style="color:#AF7817">
<center><h1 stlye="margin-bottom: 0 0 0 0"><p style="font-size:70px">My Sustainability Clicker</p></h1></center>
</div>
<div style="color:#2B65EC">
<div class="game-object">
<script type="text/javascript">
var clicks = 0;
function updateClickCount() {
document.getElementById("clickCount").innerHTML = clicks;
if (clicks == 50) {
alert("You have made earth sustainable!");
} else {
/// do something
}
}
</script>
<center><button type="button" onClick="clicks++;updateClickCount();" id="push">
<p style="font-size:20px"><div style="color:#E238EC">Click me for Trees!</div></p></button></center>
<center> <p style="font-size:20px"><div id="clickCount"></div></p></center>
</div>
</div>
<div style="color:#F70D1A">
<center><p style="font-size:20px"><i><b>By: John Parkinham</i></b></p></center>
</div>
<center><input type="image" name="Cookie" value="Cookie" src="tree-clipart-tree_tiny_green_shaded.png" width="445px"/></center>
</input>
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.
Related Question
How do I make an object stop if it reaches a certain point on a page?
So this is saying i have an undefined variable in my fiat object?
How do I make something blink when a variable changes with Angular
Sweet Alert 2 and javascript:How do i make a Sweet alert button that sends me to a certain webpage when clicked
How can I have something like a message variable for a popup
How do I make my alert disappear?
I am trying to increment variable when the video reaches a cue point
How do I alert a popup when an option is clicked in the bootstrap duallistbox?
How do i console.log something when a variable reach a certain value?
How do I make it so that when I click an image element, it will add an alert showing the .title, .artist, .album, and .year?
Related Tags