Question

我通常是JavaScript和Web开发的初学者，我正在编写一个简单的Web程序以获取1-99之间的随机数，然后从用户那里进行猜测。问题是我想根据用户的猜测显示图像太低，太高或正确。据我所知，我拥有最初隐藏图像，然后在满足条件时显示它们所需的所有代码。由于某种原因，我的document.getElementById（“ id”）。style.display ='block';都没有；要么 document.getElementById（“ id”）。style.display ='none';似乎有效。任何帮助表示赞赏。

function hideTooHigh() {
    document.getElementById("tooHigh").style.display = 'hidden';
}

function hideTooLow() {
    document.getElementById("tooLow").style.display = 'hidden';
}

function hideCorrect() {
    document.getElementById("correct").style.display = 'hidden';
}

function guessinggame() {
    var answer = Math.floor((Math.random() * 100) + 1);
    var input = 0;

    while (input != answer) {
        hideTooHigh();
        hideTooLow();
        hideCorrect();
        var inputstring = prompt("Please enter your guess", "0");
        var input = parseInt(inputstring);
        if (input < answer) {
            // display less than image
            document.getElementById("tooLow").style.display = 'block';

            // setTimeout(hideTooLow, 3000);
        } else if (input > answer) {
            // display greater than image
            document.getElementById("tooHigh").style.display = 'block';
            // setTimeout(hideTooHigh, 3000);
        }

    }
    if (input == answer) {
        // display correct image
        document.getElementById("correct").style.display = 'block';
        // setTimeout(hideCorrect, 3000);
    }
}

<html>

<head>

    <title>Number Guessing Game</title>
    <script src="guessinggame.js"></script>

</head>

<body>

    <h1>Click button to begin the guessing game</h1>
    <p>To play, guess a whole number between 1-99 by typing it into the prompt window and pressing enter.<br>Depending on if you are too high, too low, or correct on your guess one of the images will display below. Too high displays a down arrow, while too
        low displays an up arrow.</p>
    <button onclick="guessinggame()">Play!</button>
    <div id="tooHigh"><img src="toohigh.jpg" width="250" height="250"></div>
    <div id="tooLow"><img src="toolow.png" width="250" height="250"></div>
    <div id="correct"><img src="correct.jpg" width="250" height="250"></div>

</body>

</html>

Answer 1

有两个问题：

您无法以这种方式构造JavaScript代码。 JavaScript代码在事件循环中运行。在浏览器上，主要JavaScript代码（script元素中的代码）由更新页面显示的同一线程执行。因此，当您的代码被调用时，它需要完成工作然后返回，以便浏览器可以更新您所做的任何更改。而不是prompt循环中的while，请使用页面上的input元素和用户单击以提交其猜测的按钮。该按钮上的单击处理程序将具有while循环主体中当前的代码。

display属性的“不显示”值为none。（hidden用于visibility属性。）

所以

document.getElementById("tooHigh").style.display = 'hidden';

应该是

document.getElementById("tooHigh").style.display = 'none';
// -------------------------------------------------^^^^

Answer 2

您使用“隐藏”而不是“无”

document.getElementById（“ tooLow”）。style.display ='hidden';

尝试一下：

document.getElementById（“ tooLow”）。style.display ='none';

Answer 3

如果您正在寻找仅与通过javascript显示相关的答案，请使用可见性而不是显示。

document.getElementById("tooHigh").style.visibility = 'hidden';隐藏内容
document.getElementById("tooHigh").style.visibility = 'visible';用于显示内容

document.getElementById（“ id”）。style.display ='hidden';不工作

3 个答案: