Question

输入正确答案两次后，即使再次输入正确答案，任何后续尝试都会显示“再试一次”输出。造成这种奇怪行为的原因是什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type="text/javascript">
            var answer;
            var firstNum;
            var secondNum;
            var check = true;
            question();

            function question() {
                firstNum = Math.floor(Math.random() * 101);
                secondNum = Math.floor(Math.random() * 101);
                answer = firstNum * secondNum;
                document.writeln("<h1>How much is " + firstNum + " times " + secondNum + "</h1>");
                document.writeln(answer);
                document.write('<input name="inputAnswer" type="text" id="inputAns"/>');
                document.write('<input name="submitBtn" type="submit" value="Submit Answer" onclick="validate()"/>');
            }

            function validate() {
                if (document.getElementById("inputAns").value == answer) {
                    document.write("Good");
                    check = true;
                    result();
                } else {
                    check = false;
                    document.write("try again");
                    result();
                }
            }

            function result() {
                if (check == true)
                    question();
                else {
                    document.writeln("<h1>How much is " + firstNum + " times " + secondNum + "</h1>");
                    document.writeln(answer);
                    document.write('<input name="inputAnswer" type="text" id="inputAns"/>');
                    document.write('<input name="submitBtn" type="submit" value="Submit Answer" onclick="validate()"/>');
                }
            }
        </script>
    </head>

    <body></body>

</html>

Answer 1

这是因为您使用id="inputAns"重复创建元素。两个元素不允许具有相同的id。

另请注意：

如果在FIRST输入框中键入数字，则输出（正常/再次尝试）是正确的。这是由document.getElementByID的工作方式引起的。
点击哪个“提交答案”无关紧要 - 他们都做同样的事情（validate()）。

Answer 2

我有一种类似的解决方案，但方式不同。试试吧。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"                                          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 <h1>How much is <span id="firstnumber"></span>  times <span id="secondnumber"></span></h1>
              answer
                <input name="inputAnswer" type="text" id="inputAns"/>
                <input name="submitBtn" type="submit" value="Submit Answer" onclick="validate()"/>
                <span id="answer"></span>
<script type = "text/javascript">
    var answer;
    var firstNum;
    var secondNum;
    var check= true;
   var count=0;
question();


    function question()
    {   

            firstNum= Math.floor(Math.random()*101);
            secondNum= Math.floor(Math.random()*101);

            answer = firstNum * secondNum;



              document.getElementById("firstnumber").innerHTML=firstNum;
               document.getElementById("secondnumber").innerHTML=secondNum;

    }



    function validate()
    {
        if(document.getElementById("inputAns").value == answer)
        {


            check= true;


        }
        else
        {
            check= false;


        }
        result();


    }

    function result()
    {
        if(check== true)
        {
            document.getElementById("answer").innerHTML="correct answer"
            count=count+1;


        }
        else
        {
            document.getElementById("answer").innerHTML="wrong answer.<br>you've corrected total "+count+" questions.";
        }
        document.getElementById("inputAns").value="";
         question();


    }

    </script>

它出错后，程序正常工作两次

2 个答案: