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

您已将表单操作和“click”事件连接到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 个答案: