Javascript 計數器的增量超過 1。為什么？我該如何解決？

Question

我正在為一個班級制作一個簡單的猜謎游戲。 我試圖在里面放一個計數器來計算用戶在得到正確答案之前猜測的數字。 問題是我的計數器增加了兩個而不是一個。

計數器是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();
}

這是 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>

我還是 Javascript 的新手。 有人可以幫我找到解決方案嗎？

Answer 1

您已經將表單操作和“單擊”事件都連接到checkGuess()函數。 單擊該按鈕將導致該函數被調用兩次。

Answer 2

我認為如果你設置一個小提琴會更快

<form id='guessForm' name="guessForm" action="javascript:checkGuess()">
<input id="btn" type="submit" value="Guess" onclick="checkGuess()" style="font-size: 20px;">

你兩次調用 checkGuess

Javascript 計數器的增量超過 1。為什么？我該如何解決？

問題描述

2 個解決方案

解決方案1
1 已采納 2016-04-06 21:55:03

解決方案2
0 2016-04-06 22:00:35

Javascript 計數器的增量超過 1。為什么？ 我該如何解決？

問題描述

2 個解決方案

解決方案1 1 已采納 2016-04-06 21:55:03

解決方案2 0 2016-04-06 22:00:35

Javascript 計數器的增量超過 1。為什么？我該如何解決？

解決方案1
1 已采納 2016-04-06 21:55:03

解決方案2
0 2016-04-06 22:00:35