测验无法正常工作，点击提交按钮后，没有任何反应

时间：2017-06-02 15:28:24

标签： javascript html

我做了一个小测验，我使用了一个在线代码并将其格式化了一下。 所以当你点击提交时，应该有一个答案，比如你需要做更多的事情 学习或某事和得分。 

<div id="main">

<!-- open main div -->
<div class="quizstyle">
<h1>Quiz</h1>
<form id="form1" action=" ">
<h3>Question 1</h3>
<div class="row"><input name="variable" type="radio" value="0" />Answer 1</div>
<div class="row"><input name="variable" type="radio" value="0" />Answer 2</div>
<div class="row"><input name="variable" type="radio" value="33" />Answer 3</div>
&nbsp;
<h3>Question 2</h3>
<div class="row"><input name="sub" type="radio" />Answer 1</div>
<div class="row"><input name="sub" type="radio" />Answer 2</div>
<div class="row"><input name="sub" type="radio" />Answer 3</div>
&nbsp;
<h3>Question 3</h3>
<div class="row"><input name="con" type="radio" value="0" />Answer 1</div>
<div class="row"><input name="con" type="radio" value="33" />Answer 2</div>
<div class="row"><input name="con" type="radio" value="0" />Answer 3</div>
</form></div>
<input type="submit" value="Submit" />

Your grade is: <span id="grade">__</span>
<p id="grade2"></p>

</div>
<!-- close main div -->

<script>
document.getElementById("form1").onsubmit=function() {
       variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
	   sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
	   con = parseInt(document.querySelector('input[name = "con"]:checked').value);
	   
	   result = variable + sub + con;
	   
	document.getElementById("grade").innerHTML = result;
	   
if (result == 0) {result2 = "I don't think you studied."};
if (result == 33) {result2 = "You need to spend more time. Try again."};
if (result == 66) {result2 = "I think you could do better. Try again."};
if (result == 99) {result2 = "Excellent!"};
document.getElementById("grade2").innerHTML = result2; 

return false; // required to not refresh the page; just leave this here
} //this ends the submit function

</script>

有谁知道问题可能是什么？

3 个答案:

答案 0 :(得分：0)

您需要将提交<input type="submit>放在表单中，而不是初始化var result2，并且您没有为第二个问题设置value，所以它是阅读NaN 

<div id="main">

  <!-- open main div -->
  <div class="quizstyle">
    <h1>Quiz</h1>
    <form id="form1" action=" ">
      <h3>Question 1</h3>
      <div class="row">
        <input name="variable" type="radio" value="0" />Answer 1</div>
      <div class="row">
        <input name="variable" type="radio" value="0" />Answer 2</div>
      <div class="row">
        <input name="variable" type="radio" value="33" />Answer 3</div>
      &nbsp;
      <h3>Question 2</h3>
      <div class="row">
        <input name="sub" type="radio" value="33" />Answer 1</div>
      <div class="row">
        <input name="sub" type="radio" value="0" />Answer 2</div>
      <div class="row">
        <input name="sub" type="radio" value="0" />Answer 3</div>
      &nbsp;
      <h3>Question 3</h3>
      <div class="row">
        <input name="con" type="radio" value="0" />Answer 1</div>
      <div class="row">
        <input name="con" type="radio" value="33" />Answer 2</div>
      <div class="row">
        <input name="con" type="radio" value="0" />Answer 3</div>
      <input type="submit" value="Submit" />
    </form>
  </div>


  Your grade is: <span id="grade">__</span>
  <p id="grade2"></p>

</div>
<!-- close main div -->

<script>
  document.getElementById("form1").onsubmit = function() {
      variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
      sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
      con = parseInt(document.querySelector('input[name = "con"]:checked').value);

      result = variable + sub + con;

      document.getElementById("grade").innerHTML = result;
      var result2 = "";
      if (result == 0) {
        result2 = "I don't think you studied."
      };
      if (result == 33) {
        result2 = "You need to spend more time. Try again."
      };
      if (result == 66) {
        result2 = "I think you could do better. Try again."
      };
      if (result == 99) {
        result2 = "Excellent!"
      };
      document.getElementById("grade2").innerHTML = result2;

      return false; // required to not refresh the page; just leave this here
    } //this ends the submit function
</script>

答案 1 :(得分：0)

你基本上忘了在表单中包含提交按钮，也忘了给第二个问题的无线电输入值。还初始化result2变量

这是工作代码

<div id="main">

<!-- open main div -->
<div class="quizstyle">
<h1>Quiz</h1>
<form id="form1" action=" ">
<h3>Question 1</h3>
<div class="row"><input name="variable" type="radio" value="0" />Answer 1</div>
<div class="row"><input name="variable" type="radio" value="0" />Answer 2</div>
<div class="row"><input name="variable" type="radio" value="33" />Answer 3</div>
&nbsp;
<h3>Question 2</h3>
<div class="row"><input name="sub" type="radio" value="0" />Answer 1</div>
<div class="row"><input name="sub" type="radio"  value="34" />Answer 2</div>
<div class="row"><input name="sub" type="radio" value="0" />Answer 3</div>
&nbsp;
<h3>Question 3</h3>
<div class="row"><input name="con" type="radio" value="0" />Answer 1</div>
<div class="row"><input name="con" type="radio" value="33" />Answer 2</div>
<div class="row"><input name="con" type="radio" value="0" />Answer 3</div>
<input type="submit" value="Submit" />
</form>
</div>


Your grade is: <span id="grade">__</span>
<p id="grade2"></p>

</div>
<!-- close main div -->

<script>
document.getElementById("form1").onsubmit=function() {
       variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
	   sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
	   con = parseInt(document.querySelector('input[name = "con"]:checked').value);
	   
	   result = variable + sub + con;
	   
	document.getElementById("grade").innerHTML = result;
	var result2 = ""
	   

if (result == 0) {result2 = "I don't think you studied."};
if (result == 33) {result2 = "You need to spend more time. Try again."};
if (result == 66) {result2 = "I think you could do better. Try again."};
if (result == 99) {result2 = "Excellent!"};
document.getElementById("grade2").innerHTML = result2; 

return false; // required to not refresh the page; just leave this here
} //this ends the submit function

</script>

答案 2 :(得分：0)

表单未提交，因为提交按钮需要在表单中。你也有一些错误 - 比如丢失分号 - 你忘了为第二批答案添加值。

请参阅代码段。

＆＃13;
＆＃13; 
<div id="main">

<!-- open main div -->
<div class="quizstyle">
<h1>Quiz</h1>
<form id="form1" action=" ">
<h3>Question 1</h3>
<div class="row"><input name="variable" type="radio" value="0" />Answer 1</div>
<div class="row"><input name="variable" type="radio" value="0" />Answer 2</div>
<div class="row"><input name="variable" type="radio" value="33" />Answer 3</div>
&nbsp;
<h3>Question 2</h3>
<div class="row"><input name="sub" type="radio" value="33" />Answer 1</div>
<div class="row"><input name="sub" type="radio" value="0" />Answer 2</div>
<div class="row"><input name="sub" type="radio" value="0" />Answer 3</div>
&nbsp;
<h3>Question 3</h3>
<div class="row"><input name="con" type="radio" value="0" />Answer 1</div>
<div class="row"><input name="con" type="radio" value="33" />Answer 2</div>
<div class="row"><input name="con" type="radio" value="0" />Answer 3</div>
<input type="submit" value="Submit" />
</form></div>

Your grade is: <span id="grade">__</span>
<p id="grade2"></p>

</div>
<!-- close main div -->

<script>
document.getElementById("form1").onsubmit = function() {
  variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
  sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
  con = parseInt(document.querySelector('input[name = "con"]:checked').value);
  result = variable + sub + con;
  document.getElementById("grade").innerHTML = result;
  if (result === 0) {
    result2 = "I don't think you studied.";
  }
  if (result === 33) {
    result2 = "You need to spend more time. Try again.";
  }
  if (result === 66) {
    result2 = "I think you could do better. Try again.";
  }
  if (result === 99) {
    result2 = "Excellent!";
  }
  document.getElementById("grade2").innerHTML = result2;
  return false; // required to not refresh the page; just leave this here
};
</script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题