onClick没有在测验中作出反应

时间：2017-04-10 15:02:16

标签： javascript onclick

我正在通过JavaScript进行测验，为学校做这个项目。单击按钮后，我希望它显示一条消息，但由于某种原因，点击后没有任何反应。你们能帮助我吗？我经历过几次但仍然不知道出了什么问题; / 

function check() {
  var question1 = document.quiz.question1.value;
  var question2 = document.quiz.question2.value;
  var question3 = document.quiz.question3.value;
  var question4 = document.quiz.question4.value;
  var question5 = document.quiz.question5.value;
  var question6 = document.quiz.question6.value;
  var question7 = document.quiz.question7.value;
  var question8 = document.quiz.question8.value;
  var correct = 0;
  if (question1 == "voldoende" || "goed") {
    correct++;
  }
  if (question2 == "Voldoende" || "Goed") {
    correct++;
  }
  if (question3 == "Voldoende" || "Goed") {
    correct++;
  }
  if (question4 == "Voldoende" || "Goed") {
    correct++;
  }
  if (question5 == "Voldoende" || "Goed") {
    correct++;
  }
  if (question6 == "Voldoende" || "Goed") {
    correct++;
  }
  if (question7 == "Voldoende" || "Goed") {
    correct++;
  }
  if (question8 == "Voldoende" || "Goed") {
    correct++;
  }
  var messages = ["You passed!", "You failed", "You did awesome"];
  var range;
  if (correct < 5) {
    range = 1;
  }
  if (correct > 5 && correct < 8) {
    range = 0;
  }
  if (correct == 8) {
    range = 2;
  }
  document.getElementById("after_submit").style.visibility = "visible";
  document.getElementById("message").innerHTML = messages[range];
}
body {
  font-family: 'Lato', sans-serif;
}

after_submit {
  visibility: hidden;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/stylesheets.css"> </head>

<body>
  <h1>Will I get a good grade for this project?</h1>
  <form id="quiz" name="quiz">
    <p>Is my code interactief?</p>
    <input id="mc" type="radio" name="Question1" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question1" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question1" value="goed">Goed
    <br>
    <p>Dom Manipulatie</p>
    <input id="mc" type="radio" name="Question2" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question2" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question2" value="goed">Goed
    <br>
    <p>Controle Structuren</p>
    <input id="mc" type="radio" name="Question3" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question3" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question3" value="goed">Goed
    <br>
    <p>Loops</p>
    <input id="mc" type="radio" name="Question4" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question4" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question4" value="goed">Goed
    <br>
    <p>Array/object</p>
    <input id="mc" type="radio" name="Question5" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question5" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question5" value="goed">Goed
    <br>
    <p>Functies</p>
    <input id="mc" type="radio" name="Question6" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question6" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question6" value="goed">Goed
    <br>
    <p>Flow</p>
    <input id="mc" type="radio" name="Question7" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question7" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question7" value="goed">Goed
    <br>
    <p>Kwaliteit</p>
    <input id="mc" type="radio" name="Question8" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question8" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question8" value="goed">Goed
    <br>
    <input id="button" type="button" value="Check my grade" onclick="check();"> </form>
  <div id="after_submit">
    <p id="message"></p>
    <p id="number_correct"></p>
  </div>
  <script src="js/game.js"></script>
</body>

</html>

3 个答案:

答案 0 :(得分：2)

您需要将所有question1.value question2.value ...更改为Question1.value Question2.value ...因为这是您输入的名称

但你仍然需要检查你的逻辑，因为无论你在单选按钮上选择哪个选项，你总会得到“你做得很棒”的消息

答案 1 :(得分：2)

按 F12 查看开发人员工具。在控制台中，您将看到如下错误消息：

Uncaught TypeError: Cannot read property 'value' of undefined

这意味着document.quiz.question1，...未定义。为什么？因为属性名称错误。写（注意大写字母）：

document.quiz.Question1

答案 2 :(得分：0)

  

我在你的代码中发现了很多错误（无论是程序化的还是   逻辑上）1。 Goed 与 goed 不一样，所以    Voldoende 和 voldoende （考虑案例的一致性，无论是HTML还是Javascript。是的， HTML不是区分大小写的语言   但Javascript做。
2. 5分显示未定义 - ＆gt;必须使用   correct <= 5条件
3. 逻辑操作相关问题    - ＆GT; question1 == "voldoende"与"voldoende"不同（解决方案：仍在右侧重写question1 == value或   运营商） - ＆gt; 这也是你总能获得8分的主要原因。 （或运算符的右侧始终为TRUE，如果不包含"goed" == "goed"代码，则只需重新设置questionN ==

     

最后@JérémieL'的陈述， F12开发者工具他有   用过，基本上是用来解决这些问题的东西:)它   帮助很多。 使用断点来了解每个行/块的值   代码。

下面的

小部件包含项目的正确脚本。
为了便于阅读，我在变更上添加了评论标记

function check() {
<!-- question1 to Question1, right side of assignment operator -> due to case sensitivity, must be first letters capitalized in both JS and HTML -->
  var question1 = document.quiz.Question1.value;
  var question2 = document.quiz.Question2.value;
  var question3 = document.quiz.Question3.value;
  var question4 = document.quiz.Question4.value;
  var question5 = document.quiz.Question5.value;
  var question6 = document.quiz.Question6.value;
  var question7 = document.quiz.Question7.value;
  var question8 = document.quiz.Question8.value;
  var correct = 0;
  <!-- goed on the right side of logical operator must contain question1 == on its left, always remember -->
  if (question1 == "voldoende" || question1 == "goed") {
    correct++;
  }
  if (question2 == "voldoende" || question2 == "goed") {
    correct++;
  }
  if (question3 == "voldoende" || question3 == "goed") {
    correct++;
  }
  if (question4 == "voldoende" || question4 == "goed") {
    correct++;
  }
  if (question5 == "voldoende" || question5 == "goed") {
    correct++;
  }
  if (question6 == "voldoende" || question6 == "goed") {
    correct++;
  }
  if (question7 == "voldoende" || question7 == "goed") {
    correct++;
  }
  if (question8 == "voldoende" || question8 == "goed") {
    correct++;
  }
  var messages = ["You passed!", "You failed", "You did awesome"];
  var range;
  <!-- correct < 5 to correct <= 5, making no space for undefined message -->
  if (correct <= 5) {
    range = 1;
  }
  if (correct > 5 && correct < 8) {
    range = 0;
  }
  if (correct == 8) {
    range = 2;
  }
  document.getElementById("after_submit").style.visibility = "visible";
  document.getElementById("message").innerHTML = messages[range];
}
body {
  font-family: 'Lato', sans-serif;
}

after_submit {
  visibility: hidden;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/stylesheets.css"> </head>

<body>
  <h1>Will I get a good grade for this project?</h1>
  <form id="quiz" name="quiz">
    <p>Is my code interactief?</p>
    <input id="mc" type="radio" name="Question1" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question1" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question1" value="goed">Goed
    <br>
    <p>Dom Manipulatie</p>
    <input id="mc" type="radio" name="Question2" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question2" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question2" value="goed">Goed
    <br>
    <p>Controle Structuren</p>
    <input id="mc" type="radio" name="Question3" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question3" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question3" value="goed">Goed
    <br>
    <p>Loops</p>
    <input id="mc" type="radio" name="Question4" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question4" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question4" value="goed">Goed
    <br>
    <p>Array/object</p>
    <input id="mc" type="radio" name="Question5" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question5" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question5" value="goed">Goed
    <br>
    <p>Functies</p>
    <input id="mc" type="radio" name="Question6" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question6" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question6" value="goed">Goed
    <br>
    <p>Flow</p>
    <input id="mc" type="radio" name="Question7" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question7" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question7" value="goed">Goed
    <br>
    <p>Kwaliteit</p>
    <input id="mc" type="radio" name="Question8" value="genant">Genant
    <br>
    <input id="mc" type="radio" name="Question8" value="voldoende">Voldoende
    <br>
    <input id="mc" type="radio" name="Question8" value="goed">Goed
    <br>
    <input id="button" type="button" value="Check my grade" onclick="check();"> </form>
  <div id="after_submit">
    <p id="message"></p>
    <p id="number_correct"></p>
  </div>
  <script src="js/game.js"></script>
</body>

</html>

相关问题
最新问题