HTML JavaScript 퀴즈

-4

이것은 Computer Science 101 클래스의 과제이기 때문에 다른 방법을 사용하기로 결심했습니다. 자바 스크립트 사용으로 간단한 html 코드를 제시해야합니다. 어쨌든, 다른 코드가 있습니다. 이 코드의 문제점은 사람이 두 번째 질문에서 A를 선택하면 사람이 첫 번째 질문에서 A 또는 B를 선택한 경우 코드에서 확인하도록하려는 것입니다. 코드를 살펴보십시오.HTML JavaScript 퀴즈

<html> 
<head> 
    <title>Quiz</title> 
</head> 

<body bgcolor="#FFFFFF"> 
    <h1>Quiz</h1><br> 
    <hr> 

    <form> 
     <ol> 
      <li>Do you know when is Canada Day? 

       <p><input onclick="myFunction2()" type= 
       'button' value='A'> Yes</p> 

       <p><input type= 
       'button' value='B'> No</p> 

       <p></p> 
       <hr> 

       <p></p> 
      </li> 

      <li>Do you celebrate Canada Day? 

       <p><input onclick="myFunction3()" type= 
       'button' value='A'> Yes</p> 

       <p><input onclick="myFunction1()" type= 
       'button' value='B'> No</p> 

       <p></p> 
       <hr> 

       <p></p> 
      </li> 
     </ol> 
    </form> 
    <script> 
    var x; 
    function myFunction1() 
    { 
     alert('You have to learn more about Canada Day!') 
    } 

    function myFunction2() 
    { 
     x=1; 
    } 

    function myFunction3() 
    { 
    if (x=1) 
    { 
     alert('You are a true Canadian') 
    } 
    else 
    { 
     alert('You have to learn more') 
    } 
    } 

    </script> 
</body> 
</html>

출처

2014-11-27 Yury Vaskovskiy

먼저 인라인 자바 스크립트를 쓰지 않는 것이 좋습니다.

버튼에 이벤트 핸들러를 설정하려는 경우 이벤트 리스너를 설정하려면 클래스 이름을 지정해야합니다. 간단히하기 위해 jQuery를 사용하여이 작업을 수행하려고합니다.

여기에 JsFiddle이 생성되었습니다.

HTML

<html> 
    <head> 
     <title>Quiz</title> 
    </head> 
    <body bgcolor=#ffffff> 
     <center><h1>Quiz</h1></center><hr> 
     <p>Do you know when is Canada Day?<p> 
     <button class="canadaButtonYes">Yes<p> 
     <button class="canadaButtonNo">No<p> 
    </body> 
</html>

자바 스크립트/jQuery를

$(document).ready(function() { 
    $('.canadaButtonYes').on('click', function() { 
     answer = confirm('Do you celebrate Canada day?'); 
     if (answer === true) 
      alert('You are a true canadian!'); 
     else 
      alert('You should learn more!'); 
    }); 

    $('.canadaButtonNo').on('click', function() { 
     alert("You should learn more!"); 
    }); 

});

당신에게 행운을 빕니다.

출처

2014-11-27 01:31:45

HTML JavaScript 퀴즈

답변

관련 문제