Question

我应该制作这个简单的程序。它会产生乘法问题，当用户键入正确的答案时，它应该产生另一个问题。相反，它进入无限循环并且永不停止，答案字段和按钮消失。此外，我应该发表关于用户回答的评论，这是4种不同的说法之一。不使用Arrays我该怎么做？

我的教授没有任何帮助，因为我没有别的地方可以变得更加恶化。

<html>
    <title>HW 9.27 and 9.28</title>
    <head>
        <script type="text/javascript">
            var number1;
            var number2;
            var answer3;
            var answer2;

            function problem() {
                number1 = Math.floor(1 + Math.random() * 9);
                number2 = Math.floor(1 + Math.random() * 9);
                document.writeln("How much is " + number1 + " times " + number2 + " ?");
                answer2 = (number1 * number2);
            }

            function answer1() {
                var statusDiv = document.getElementById("status");
                answer3 = document.getElementById("answer").value;

                if (answer3 != answer2) statusDiv.innerHTML = "No. Please try again";
                else if (answer3 == answer2) {
                    statusDiv.innerHTML = "Very good!";
                    problem();
                }
            }
            problem();

        </script>
    </head>
    <body>
        <form>
            <input id="answer" type="text" />
            <input type="button" value="Solve!" onclick="answer1()" />
            <div id ="status">Click the Solve button to Solve the problem</div>
        </form>
    </body>
</html>

Answer 1

简单地说，document.writeln("How much is " + number1 + " times " + number2 + " ?");删除所有内容然后写入字符串。所以你丢失了所有表格输入。

在初始页面加载时没有发生的原因是因为在加载表单元素之前调用了document.writeln。

试试这个：

<html>
<title>HW 9.27 and 9.28</title>
<head>
<script type="text/javascript">
var number1;
var number2;
var answer3;
var answer2;

function problem()
{
number1 = Math.floor( 1 + Math.random() * 9 );
number2 = Math.floor( 1 + Math.random() * 9 );
document.getElementById("prompt").innerHTML = "How much is " + number1 + " times " +     number2 + " ?";
answer2 = (number1*number2);
}

function answer1()
{
var statusDiv = document.getElementById("status");
answer3=document.getElementById("answer").value;

if(answer3 != answer2)
statusDiv.innerHTML="No. Please try again";
else
if (answer3==answer2)
{
statusDiv.innerHTML="Very good!";
problem();
}}


</script>
</head>
<body onload="problem();">
<form>
<div id ="prompt"></div>
<input id="answer" type="text" />
<input type="button" value="Solve!" onclick="answer1()" />
<div id ="status">Click the Solve button to Solve the problem</div>
</form>
</body>
</html>

Answer 2

没有无限循环，但document.writeln会导致问题。

我建议你设置问题的方式与设置其他信息的方式相同。

Answer 3

我认为问题在于document.writeln。你有一个问题的div，然后将问题作为innerHTMl分配到该div。

试试这个：

<html>
<title>HW 9.27 and 9.28</title>
<head>
<script type="text/javascript">
var number1;
var number2;
var answer3;
var answer2;

function problem()
{
    number1 = Math.floor( 1 + Math.random() * 9 );
    number2 = Math.floor( 1 + Math.random() * 9 );
    var question = document.getElementById("question");
    question.innerHTML = "How much is " + number1 + " times " + number2 + " ?";
    answer2 = (number1*number2);
}

function answer1()
{
    var statusDiv = document.getElementById("status");
    answer3=document.getElementById("answer").value;

    if(answer3 != answer2)
    statusDiv.innerHTML="No. Please try again";
    else
    if (answer3==answer2)
    {
        statusDiv.innerHTML="Very good!";
        document.getElementById("answer").value = "";
        problem();
    }
}
</script>
</head>
<body>
<form>
    <div id ="question"></div>
    <input id="answer" type="text" />
    <input type="button" value="Solve!" onclick="answer1()" />
    <div id ="status">Click the Solve button to Solve the problem</div>
</form>
<script type="text/javascript">
    problem();
</script>
</body>
</html>

Answer 4

你有几个问题：

首先，当您单击“解决”按钮时，不会调用answer1函数。我建议不要在HTML中使用onclick，而是添加：

document.getElementById("solve").onclick = answer1;

到你的JavaScript。

此外，您正在将字符串输入与数字进行比较。那不行。您需要将输入转换为数字。使用parseInt(answer3,10) 10表示基数10，并确保06被解释为6而不是八进制。

此外，我不会使用if，然后使用else if。只需使用if然后使用else即可：

if (parseInt(answer3,10) === answer2){
        //got it right!
     }
    else {
        ///got it wrong
    }

另请勿使用document.writeln。它正在删除页面上的内容。创建div：<div id="problem"></div>并填写：

problemDiv.innerHTML = "How much is " + number1 + " times " + number2 + " ?";

您还应该重命名变量。您的变量名称不明确。

祝你好运！

阅读材料：

Try it out!

JavaScript乘法游戏

4 个答案: