Question

我尝试进行多项选择测验，但出于某种原因，当我点击测验结束时的sumbit按钮时，得分输入中没有出现任何内容。我尝试了一切，仍然无法让它工作。有人可以解释我做错了什么？谢谢

function checkAnswer() {
    var correct = 0;
    var q1 = document.quiz.q1.value;
    var q2 = document.quiz.q2.value;
    var q3 = document.quiz.q1.value;
    var q4 = document.quiz.q4.value;

 var answers["Cascading Style Sheets","Dynamic HTML","Netscape","Common Gateway Interface"];
    if (q1 === answers[0]) {
        correct++
    }

    if (q2 === answers[1]) {
        correct++
    }

    if (q3 === answers[2]) {
        correct++
    }

    if (q4 === answers[3]) {
        correct++
    }

    var score = Math.round(correct / 4 * 100)

    document.getElementById("score").innerHTML = score;
}

HTML：

<h3>Web Design Quiz</h3>

<form id="quiz" name="quiz">
  <p> What does CSS stand for? </p>
  <ul style="margin-top: 1pt">
    <li>
      <input type="radio" name="q1" value="Colorful Style Symbols">Colorful Style Symbols</li>
    <li>
      <input type="radio" name="q1" value="Cascading Style Sheets">Cascading Style Sheets</li>
    <li>
      <input type="radio" name="q1" value="Computer Style Symbols">Computer Style Symbols</li>
  </ul>

  2.
  <p>What does DHTML stand for?</p>
  <ul style="margin-top: 1pt">
    <li>
      <input type="radio" id="myCheck" name="q2" value="Dramatic HTML">Dramatic HTML</li>
    <li>
      <input type="radio" id="myCheck" name="q2" value="Design HTML">Design HTML</li>
    <li>
      <input type="radio" id="myCheck" name="q2" value="Dynamic HTML">Dynamic HTML</li>
  </ul>
  3.
  <p>Who created Javascript?</p>
  <ul style="margin-top: 1pt">
    <li>
      <input type="radio" id="myCheck" name="q3" value="Microsoft">Microsoft</li>
    <li>
      <input type="radio" id="myCheck" name="q3" value="Netscape">Netscape</li>
    <li>
      <input type="radio" id="myCheck" name="q3" value="Sun Micro Systems">Sun Micro Systems</li>
  </ul>
  4.
  <p> What does CGI stand for?</p>
  <ul style="margin-top: 1pt">
    <li>
      <input type="radio" id="myCheck" name="q4" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
    <li>
      <input type="radio" id="myCheck" name="q4" value="Common GIF Interface">Common GIF Interface</li>
    <li>
      <input type="radio" id="myCheck" name="q4" value="Common Gateway Interface">Common Gateway Interface</li>
  </ul>

  <button type="button" onclick='checkAnswer()'>Submit </button>
  <input type="reset" value="Clear answers">




   <p>
Score = <input type=text size=15 id="score" name="percentage"><br>

</p>
        <br>

Answer 1

在浏览器中打开开发人员工具。看看控制台。

您将看到一个ReferenceError，因为answers尚未在任何地方定义。

使用a validator。您有两个具有相同ID的元素。

您似乎尝试设置段落的innerHTML，但是当浏览器尝试从您的错误中恢复时，他们将使用该ID获取第一个元素，这是一个<input>。

单击提交按钮时，您将触发JS。一旦JS完成，表单将提交一个新页面将被加载。

使用type="button"。

Answer 2

设置input - 元素的值时，您应该使用元素的value属性，而不是innerHTML。

document.getElementById("score").value = score;

修改的目前还不清楚是否要在段落元素或输入元素中设置得分，两者都具有相同的ID。

Answer 3

你的代码中有很多错误。之前在评论中提到过。这是解决方案：

<h3>Web Design Quiz</h3>
<form id="quiz" name="quiz">
  <p> What does CSS stand for? </p>
    <ul style="margin-top: 1pt">
      <li><input type="radio" name="q1" value="Colorful Style  Symbols">Colorful Style Symbols</li>
    <li><input type="radio" name="q1" value="Cascading Style Sheets">Cascading Style Sheets</li>
    <li><input type="radio" name="q1" value="Computer Style Symbols">Computer Style Symbols</li>
</ul>

2. <p>What does DHTML stand for?</p>
<ul style="margin-top: 1pt">
    <li><input type="radio"  name="q2" value="Dramatic HTML">Dramatic HTML</li>
    <li><input type="radio"  name="q2" value="Design HTML">Design HTML</li>
    <li><input type="radio"  name="q2" value="Dynamic HTML">Dynamic HTML</li>
</ul>
3. <p>Who created Javascript?</p>
<ul style="margin-top: 1pt">
    <li><input type="radio" name="q3" value="Microsoft">Microsoft</li>
    <li><input type="radio" name="q3" value="Netscape">Netscape</li>
    <li><input type="radio" name="q3" value="Sun Micro Systems">Sun Micro Systems</li>
</ul>
4.<p> What does CGI stand for?</p>
<ul style="margin-top: 1pt">
    <li><input type="radio" name="q4" value="Cascading Gate Interaction">Cascading Gate Interaction</li>
    <li><input type="radio" name="q4" value="Common GIF Interface">Common GIF Interface</li>
    <li><input type="radio" name="q4" value="Common Gateway Interface">Common Gateway Interface</li>
</ul>

<input type="button" onclick='checkAnswer()'>check </input>
<input type="reset" value="Clear answers">

在你的js文件中

var answers = ["Cascading Style Sheets","Dynamic HTML","Netscape","Common Gateway Interface"];

没有显示javascript分数的测验

3 个答案: