程序正確運行兩次後出現錯誤

輸入正確答案兩次後，即使再次輸入正確答案，任何後續嘗試都會顯示「再次嘗試」輸出。什麼是造成這種奇怪的行爲？程序正確運行兩次後出現錯誤

<!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>

來源

2013-05-04 Gayan Fernando

順便說一句你在哪裏學JS？這不是大多數網絡應用程序的結構; 'document.write'在實踐中很少使用。使用'document.createElement'創建元素並使用'some_element.addEventListener'向他們添加行爲更爲常見。 – Kos 2013-05-04 12:03:09

@Kos，這聽起來像作業 – Yoni 2013-05-04 12:13:34

我有一個類似類型的解決方案，但以不同的方式。嘗試一下。

<!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>

來源

2013-05-04 12:08:57 polin

Thankz polin這麼多。它現在有效，非常感謝你.... – 2013-05-04 15:45:39

發生這種情況是因爲您反覆使用id="inputAns"創建元素。兩個元素不允許具有相同的id。

還要注意的是：

輸出，如果你在第一個輸入框中輸入數字（好/重試）是正確的。這是由document.getElementByID的工作原理造成的。
無論您點擊哪個「提交答案」 - 他們都會做同樣的事情（validate()）。

來源

2013-05-04 12:00:45 Kos

程序正確運行兩次後出現錯誤

回答

相關問題