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