Question

这是学校的家庭作业，基本游戏工作正常，但我想在每次猜测时显示用户猜测的运行标签。我已经阅读了使用JQuery的方法，但我们只应该使用JavaScript来完成这项任务。基本上我想要的是每次他们输入一个猜测，它会在HTML页面上添加一行代表＆＃34;你猜对了＃，太高/太低了。＆＃34;在下一个猜测中，它将保留该行，然后添加另一行。我试着搞乱使用innerHTML来获取它，但它并不是我想要它的工作，不会在页面上保留先前的猜测。我很感激任何帮助。感谢。

<html>
<head>
<title> JS guessing game </title>


<script type="text/javascript">
    var ranNum;

    function playGame() {

        var answer;
        var found = false;
        var count = 10;

        while ((count > 0) && (found == false)) {
            answer = prompt("Guess a number between 1 and 50!");
            if (answer > ranNum) { alert("Guess lower!"); }
            if (answer < ranNum) { alert("Guess higher!!"); }
            if (answer == ranNum) { alert("Correct!"); found = true; }
            count--;
        }
        if (!found) { alert('Too bad, you lose ... The number was ' + ranNum); }
        return found;
    }
    function generateRandomNumber() {
        ranNum = Math.floor(Math.random() * 50) + 1;
    }
    window.onload = function () { generateRandomNumber(); }
</script>
</head>
<body>
<strong> Guess a random number </strong>
     <input type="button" value="Play game" onclick="playGame()">
     <input type="button" value="New game" onclick="generateRandomNumber()">
</body>
</html>

Answer 1

向您的HTML添加新的<span id="guesses"></span>：

document.getElementById('guesses').InnerHTML += "Insert text here <br/>";

然后javascript你可以附加答案：

a ||= b

Answer 2

样本工作：

<head>
<script>
    var ranNum;

    function playGame() {

        var answer;
        var found = false;
        var count = 10;
        var guesses = document.getElementById('yourgueses');
        guesses.innerHTML = "";

        while ((count > 0) && (found == false)) {
            answer = prompt("Guess a number between 1 and 50!");
            guesses.innerHTML += answer + " "
            if (answer > ranNum) { alert("Guess lower!"); }
            if (answer < ranNum) { alert("Guess higher!!"); }
            if (answer == ranNum) { alert("Correct!"); fnd = true; }
            count--;
        }
        if (!found) { alert('Too bad, you lose ... The number was ' + ranNum); }
        return found;
    }
    function generateRandomNumber() {
        ranNum = Math.floor(Math.random() * 50) + 1;
    }
    window.onload = function () { generateRandomNumber(); }
</script>
<head/>
<title> JS guessing game </title>

<body>
<strong> Guess a random number </strong>
 <input type="button" value="Play game" onclick="playGame()"/>
 <input type="button" value="New game" onclick="generateRandomNumber()"/>
<br/>
<strong> Your Guesses: </strong>
<div id="yourgueses"></div>

https://jsfiddle.net/qw9z5ydv/

顺便说一句，考虑在里面添加一个break子句，如果answer为null（用户取消提示），它会变得太烦人。

Answer 3

从脚本的外观来看，我发现您并没有使用警告语句来通知用户。相反，您可以使用DOM，文档对象模型并访问HTML页面上的标签并操纵其内容。

var body = document.getElementsByTagName("body")[0]; body.innerHTML = body.innerHTML + "You should guess Respectively";

然而，更好的方法是为您希望提供给用户的消息和可以操作内容的VIA DOM专用标记。更重要的是避免在使用DOM时使用innerHTML的原则。

＆＃13;

window.onload = runs;

function runs()
{
    var input = document.getElementsByTagName("input")[0];
    input.onclick = printMessage;
}

function printMessage()
{
    var para = document.getElementById("helper");
    var txt = document.createTextNode("help Respectively");
    var br = document.createElement("br");
    para.appendChild(txt);
    para.appendChild(br);
}

＆＃13;

<input type="button" value="Press"/>
<p id="helper"></p>

＆＃13;

JavaScript猜谜游戏。记录猜测

3 个答案: