프로그램이 잘못 실행 된 후 두 번이나 핵심 작업을 수행합니다.

정답을 두 번 입력하면 정답을 다시 입력해도 이후의 시도에는 "다시 시도"출력이 표시됩니다. 이 이상한 행동을 일으키는 원인은 무엇입니까?프로그램이 잘못 실행 된 후 두 번이나 핵심 작업을 수행합니다.

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

BTW 어디에서 JS를 배우고 있습니까? 그것은 대부분의 웹 앱이 구조화 된 방식이 아닙니다. 'document.write'는 실제로 거의 사용되지 않습니다. 'document.createElement'를 사용하여 요소를 만들고'some_element.addEventListener'를 사용하여 요소에 동작을 추가하는 것이 더 일반적입니다. – Kos

@Kos, 숙제처럼 들리네 – Yoni

비슷한 해결책이 있지만 다른 방법이 있습니다. 시도 해봐.

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

감사합니다. 지금 일합니다. 너무 감사합니다 .... –

이것은 반복적으로 id="inputAns"으로 요소를 만들기 때문에 발생합니다. 두 요소가 동일한 id을 갖는 것은 허용되지 않습니다.

또한 참고 :

출력 첫 번째 입력 상자에 숫자를 입력하면 (좋은/다시 시도) 올바른 것입니다. 이는 document.getElementByID의 작동 방식 때문입니다.
"답안 제출"에 상관없이 모두 똑같은 것을합니다 (validate()).

출처

2013-05-04 12:00:45 Kos

프로그램이 잘못 실행 된 후 두 번이나 핵심 작업을 수행합니다.

답변

관련 문제