Javascript counter is incrementing by more than 1. Why? How do I fix this?
Question
I am making a simple guessing game for a class. I am trying to put a counter in that counts the number a guesses a user makes before getting the correct answer. The problem is that my counter is incrementing by two not one.
counter is guessCount
var x = 0;
var guessCount = 0;
var message = "Hello";
var name = prompt("Enter your name: ", "Name");
document.write("<h2>" + message + " " + name + ", ready to play?</h2>");
function initialize() {
number = Math.random();
number = number * 10;
number = Math.floor(number);
}
function checkGuess() {
setInterval("changePicture()", 3000);
guessCount++;
var userGuess = eval(document.guessForm.userGuess.value);
document.getElementById('guessBox').innerHTML= guessCount;
if (number === userGuess) {
document.getElementById('picture').src = 'check.png';
document.getElementById('picText').innerHTML = ("Correct!");
var r = document.getElementById('finishBox');
x = 2;
if (!r.style.visibility || r.style.visibility === "hidden"){
r.style.visibility = 'visible';
}
}
else if (number < userGuess) {
document.getElementById('picture').src = 'high.png';
document.getElementById('picText').innerHTML = ("Too High...");
x = 1;
}
else {
document.getElementById('picture').src = 'low.png';
document.getElementById('picText').innerHTML = ("Too Low...");
x = 1;
}
}
function changePicture() {
if (x === 1) {
document.getElementById('picture').src = 'riddle.png';
document.getElementById('picText').innerHTML = "Guess Again...";
}
}
function reload(){
location.reload();
}
Here is the HTML
<html>
<head>
<title>Game</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="guess.css" rel="stylesheet">
<script src="game.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<div id="container">
<h1>Guessing Game</h1>
<form id='guessForm' name="guessForm" action="javascript:checkGuess()">
Your Guess: <input id="userGuess" type="text" name="userGuess" value="0" size="10" maxlength="2" required>
<br><br>
<input id="btn" type="submit" value="Guess" onclick="checkGuess()" style="font-size: 20px;">
<br><br>
</form>
<div class="pictureSection">
<div id="picContainer">
<img id='picture' src='riddle.png' height='200' width='250' alt="image">
</div>
<div id='picText' style='height: 100px; width: 100px;'>Take a Guess...</div>
</div>
<div id="guessBox">Guesses: </div>
<div id="howTo">
<p>Guess a number <br>between 1 and 100.<br>
How many times will<br> you guess before you win?</p>
</div>
<div id="finishBox">Do you want to play again?
<button id="reloadBtn" type="button" onclick="reload()">Play Again</button>
</div>
</div>
</body>
</html>
I am still new to Javascript. Can someone help me find a solution?
2 answers
solution1
1 ACCPTED 2016-04-06 21:55:03
You've got the form action and the "click" event both wired to the checkGuess() function. Clicking on the button will result in the function being called twice.
solution2
0 2016-04-06 22:00:35
I think is faster if you set up a fiddle
<form id='guessForm' name="guessForm" action="javascript:checkGuess()">
<input id="btn" type="submit" value="Guess" onclick="checkGuess()" style="font-size: 20px;">
you're calling checkGuess twice
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.