javascript簡單測驗返回undefined

-2

我正在使用一個教程，讓我創建一個帶有外部javascript的html表單。當我點擊一個單選按鈕時，我應該知道答案的值。相反，無論我點擊哪個答案，我都會得到「未定義」。javascript簡單測驗返回undefined

我把這個放在JSBin上。 https://jsbin.com/docavo/edit?html,js,output

在一次試圖解決的問題中，我只抓住了由導師提供的項目文件，並將該代碼放入JSBin字段中，並得到了相同的結果。

所以代碼（和教程）是錯誤的，但它在教程中起作用。怎麼辦？

來源

2015-12-22 Paeon

你在運行什麼環境？適用於我 - Chrome v47.0.2526.106 m，適用於Windows 10 –

代碼適用於我..可以提供不適合您的代碼嗎？ – pTi

您需要實際點擊輸出容器中的「使用JS運行」按鈕以初始化JavaScript。 –

form的帖子能力受此沙盒內的沙盒iframe阻礙。如果你想正確的看到這個功能，你可以在你自己的網站上運行它。測驗工作。

什麼評論者，pTi和n 說我申請這個片段。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Multiple Coice Quiz</title> 
 
    <link href="http://glpjt.s3.amazonaws.com/_css/01.css" rel="stylesheet" /> 
 
    <style> 
 
    iframe { 
 
     border-radius: 8px; 
 
     margin-top: 20px; 
 
    } 
 
    .ui { 
 
     border-radius: 8px; 
 
     max-width: 300px; 
 
     border: 2px ridge #8cf; 
 
     padding: 10px; 
 
    } 
 
    legend, 
 
    figcaption { 
 
     color: #8cf; 
 
     font-size: 1.35rem; 
 
     font-variant: small-caps; 
 
    } 
 
    #php { 
 
     background: #fff; 
 
    } 
 
    dt { 
 
     margin-top: 12px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <section id="ii"> 
 
    <form id="quizForm" name="quizForm" action="http://examples.funwebdev.com/process.php" target="php" method="post" onsubmit="submitAnswers();"> 
 

 
     <dl> 
 
     <dt>1. In which HTML element do we put in JavaScript code?</dt> 
 
     <dd> 
 
      <input type="radio" name="q0" value="a" id="q0a" />a. &lt;js&gt;</dd> 
 
     <dd> 
 
      <input type="radio" name="q0" value="b" id="q0b" class="correct" />b. &lt;script&gt;</dd> 
 
     <dd> 
 
      <input type="radio" name="q0" value="c" id="q0c" />c. &lt;body&gt;</dd> 
 
     <dd> 
 
      <input type="radio" name="q0" value="d" id="q0d" />d. &lt;link&gt;</dd> 
 
     <dt>2. Which HTML attribute is used to reference an external JavaScript file?</dt> 
 
     <dd> 
 
      <input type="radio" name="q1" value="a" id="q1a" class="correct" />a. src</dd> 
 
     <dd> 
 
      <input type="radio" name="q1" value="b" id="q1b" />b. rel</dd> 
 
     <dd> 
 
      <input type="radio" name="q1" value="c" id="q1c" />c. type</dd> 
 
     <dd> 
 
      <input type="radio" name="q1" value="d" id="q1d" />d. href</dd> 
 
     <dt>3. How would you write "Hello" in an alert box?</dt> 
 
     <dd> 
 
      <input type="radio" name="q2" value="a" id="q2a" />a. msg("Hello");</dd> 
 
     <dd> 
 
      <input type="radio" name="q2" value="b" id="q2b" />b. alertBox("Hello");</dd> 
 
     <dd> 
 
      <input type="radio" name="q2" value="c" id="q2c" />c. document.write("Hello");</dd> 
 
     <dd> 
 
      <input type="radio" name="q2" value="d" id="q2d" class="correct" />d. alert("Hello");</dd> 
 
     <dt>4. JavaScript is directly related to the "Java" programming language</dt> 
 
     <dd> 
 
      <input type="radio" name="q3" value="a" id="q3a" />a. True</dd> 
 
     <dd> 
 
      <input type="radio" name="q3" value="b" id="q3b" class="correct" />b. False</dd> 
 
     <dt>5. A variable in JavaScript must start with which special character</dt> 
 
     <dd> 
 
      <input type="radio" name="q4" value="a" id="q4a" />a. @</dd> 
 
     <dd> 
 
      <input type="radio" name="q4" value="b" id="q4b" />b. $</dd> 
 
     <dd> 
 
      <input type="radio" name="q4" value="c" id="q4c" />c. #</dd> 
 
     <dd> 
 
      <input type="radio" name="q4" value="d" id="q4d" class="correct" />d. No Special Character</dd> 
 
     </dl> 
 
     <fieldset class="ui"> 
 
     <legend>Post Data to Server</legend> 
 
     <input id="btn" type="submit" value="Submit" /> 
 
     <label for="results">&nbsp;&nbsp;&nbsp;Results: 
 
      <output for="quizForm" id="results">0</output><span id="outOf"></span> 
 
     </label> 
 
     </fieldset> 
 
    </form> 
 
    </section> 
 
    <figure> 
 
    <figcaption>Data Received by Server</figcaption> 
 
    <iframe id="php" name="php" src="http://examples.funwebdev.com/process.php" frameborder="2" scrolling="yes"></iframe> 
 
    </figure> 
 
    <footer>&nbsp;</footer> 
 
    <script> 
 
    function submitAnswers() { 
 
     var res = document.getElementById('results'); 
 
     var keys = document.querySelectorAll('.correct'); 
 
     var total = keys.length; 
 
     var score = 0; 
 
     var outOf = document.getElementById('outOf'); 
 
     var keyArray = Array.prototype.slice.call(keys); 
 
     for (var k = 0; k < total; k++) { 
 
     var keyVal = keyArray[k].value; 
 
     var ansVal = document.forms['quizForm']['q' + k].value; 
 
     if (ansVal == keyVal) { 
 
      score++; 
 
     } else { 
 
      continue; 
 
     } 
 
     } 
 
     console.log('Score: ' + score); 
 
     outOf.innerHTML = '/' + total; 
 
     return res.value = score; 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

來源

2015-12-22 07:59:42 zer00ne

javascript簡單測驗返回undefined

回答

相關問題