为什么JavaScript函数只运行一次？

Question

编辑：我意识到我没有为添加的输入添加name标记。完成此操作后，我发布了更新后的代码。

我现在对JavaScript很陌生，我正在尝试运行一个函数来验证用户提交时的一些答案，这反过来又会对输入框进行样式化。这在我运行一次时有效，但是当我改变值并再次按下提交按钮时，该功能不会运行。

该功能是否可以多次运行？

这是功能：

function checkAnswers1() {

  var ex1q1 = document.forms["ex1"]["exq1"].value;
  var ex1q2 = document.forms["ex1"]["exq2"].value;
  var ex1q3 = document.forms["ex1"]["exq3"].value;
  var ex1q4 = document.forms["ex1"]["exq4"].value;
  var ex1q5 = document.forms["ex1"]["exq5"].value;

  var score = 0;


  if (ex1q1.toLowerCase() == "he will tidy his clothes") {
    score = score + 1;
    document.getElementById("ex1q1").innerHTML = "<div class='form-group has-success has-feedback'><input type='text' class='form-control' value='" + ex1q1 + "' name='ex1q1'><span class='glyphicon glyphicon-ok form-control-feedback' aria-hidden='true'></span></div>";
  }
  else {
    document.getElementById("ex1q1").innerHTML = "<div class='form-group has-error has-feedback'><input type='text' class='form-control' value='" + ex1q1 + "' name='ex1q21'><span class='glyphicon glyphicon-remove form-control-feedback' aria-hidden='true'></span></div>";
  }


  if (ex1q2.toLowerCase() == "i shall play in my garden" || ex1q2.toLowerCase() == "i will play in my garden") {
    score = score + 1;
    document.getElementById("ex1q2").innerHTML = "<div class='form-group has-success has-feedback'><input type='text' class='form-control' value='" + ex1q2 + "' name='ex1q2'><span class='glyphicon glyphicon-ok form-control-feedback' aria-hidden='true'></span></div>";
  }
  else {
    document.getElementById("ex1q2").innerHTML = "<div class='form-group has-error has-feedback'><input type='text' class='form-control' value='" + ex1q2 + "' name='ex1q2'><span class='glyphicon glyphicon-remove form-control-feedback' aria-hidden='true'></span></div>";
  }


  if (ex1q3.toLowerCase() == "we shall sing with my friends" || ex1q3.toLowerCase() == "we will sing with my friends") {
    score = score + 1;
    document.getElementById("ex1q3").innerHTML = "<div class='form-group has-success has-feedback'><input type='text' class='form-control' value='" + ex1q3 + "' name='ex1q3'><span class='glyphicon glyphicon-ok form-control-feedback' aria-hidden='true'></span></div>";
  }
  else {
    document.getElementById("ex1q3").innerHTML = "<div class='form-group has-error has-feedback'><input type='text' class='form-control' value='" + ex1q3 + "' name='ex1q3'><span class='glyphicon glyphicon-remove form-control-feedback' aria-hidden='true'></span></div>";
  }


  if (ex1q4.toLowerCase() == "she will give a gift to him") {
    score = score + 1;
    document.getElementById("ex1q4").innerHTML = "<div class='form-group has-success has-feedback'><input type='text' class='form-control' value='" + ex1q4 + "' name='ex1q4'><span class='glyphicon glyphicon-ok form-control-feedback' aria-hidden='true'></span></div>";
  }
  else {
    document.getElementById("ex1q4").innerHTML = "<div class='form-group has-error has-feedback'><input type='text' class='form-control' value='" + ex1q4 + "' name='ex1q4'><span class='glyphicon glyphicon-remove form-control-feedback' aria-hidden='true'></span></div>";
  }


  if (ex1q5.toLowerCase() == "will you speak about your subjects") {
    score = score + 1;
    document.getElementById("ex1q5").innerHTML = "<div class='form-group has-success has-feedback'><input type='text' class='form-control' value='" + ex1q5 + "' name='ex1q5'><span class='glyphicon glyphicon-ok form-control-feedback' aria-hidden='true'></span></div>";
  }
  else {
    document.getElementById("ex1q5").innerHTML = "<div class='form-group has-error has-feedback'><input type='text' class='form-control' value='" + ex1q5 + "' name='ex1q5'><span class='glyphicon glyphicon-remove form-control-feedback' aria-hidden='true'></span></div>";
  }

  if (score == 5) {
    alert("Well Done! You got 100%");
  }
  else {
    document.getElementById("ex1result").innerHTML = "<strong>" + "You scored " + score + "/5" + "</strong>";
  }

}

jQuery(document).ready(function() {
document.getElementById('submit1').addEventListener('click', checkAnswers1);
});

HTML是：

<form class="form" role="form" name="ex1">
    <ol>
        <li><p>Il rangera ses vêtements</p></li>
        <div id="ex1q1">
            <input type="text" class="form-control" placeholder="" name="exq1"><br />
        </div>
        <li><p>Je jouerai dans mon jardin</p></li>
        <div id="ex1q2">
            <input type="text" class="form-control" placeholder="" name="exq2"><br />
        </div>
        <li><p>Nous chanterons avec mes copains</p></li>
        <div id="ex1q3">
            <input type="text" class="form-control" placeholder="" name="exq3"><br />
        </div>
        <li><p>Elle lui donnera un cadeau</p></li>
        <div id="ex1q4">
            <input type="text" class="form-control" placeholder="" name="exq4"><br />
        </div>
        <li><p>Parleravez-vous sur vos matiéres?</p></li>
        <div id="ex1q5">
            <input type="text" class="form-control" placeholder="" name="exq5"><br />
        </div>
    </ol>
    <br />
    <div class="text-center">
<button id="submit1" type="button" class="btn btn-primary">Submit</button>
 </div>
</form>

Answer 1

您可以使用与原件不同的值替换您的名称。在原文中，您的第一个输入的名称为exq1，然后您将其替换为ex1q1。这不起作用，因为第二次元素exq1将不再存在。

最好不要实际替换<input>元素，而是在其旁边放置一个空元素，并在需要时填充内容。

Answer 2

您需要在代码中更改一些内容。 （1）您附加事件的方式不正确。使用addEventListener附加事件。 （2）不要将值传递给checkAnswers1，而是直接在方法中读取表单中的值。

考虑到这一点，我按如下方式更新了代码，以便在单击按钮时始终调用click事件处理程序。事件处理程序方法仍然有错误，但我相信你可以解决它们。

<form class="form" role="form" name="ex1">
<ol>
    <li><p>Il rangera ses vêtements</p></li>
    <div id="ex1q1">
        <input type="text" class="form-control" placeholder="" name="exq1"><br />
    </div>
    <li><p>Je jouerai dans mon jardin</p></li>
    <div id="ex1q2">
        <input type="text" class="form-control" placeholder="" name="exq2"><br />
    </div>
    <li><p>Nous chanterons avec mes copains</p></li>
    <div id="ex1q3">
        <input type="text" class="form-control" placeholder="" name="exq3"><br />
    </div>
    <li><p>Elle lui donnera un cadeau</p></li>
    <div id="ex1q4">
        <input type="text" class="form-control" placeholder="" name="exq4"><br />
    </div>
    <li><p>Parleravez-vous sur vos matiéres?</p></li>
    <div id="ex1q5">
        <input type="text" class="form-control" placeholder="" name="exq5"><br />
    </div>
</ol>
<br />
<div class="text-center">
    <button id="submit1" type="button" class="btn btn-primary">Submit</button>
 </div>
</form>


function checkAnswers1() {

var ex1q1 = document.forms['ex1']['exq1'].value;
var ex1q2 = document.forms['ex1']['exq2'].value;
var ex1q3 = document.forms['ex1']['exq3'].value;
var ex1q4 = document.forms['ex1']['exq4'].value; 
var ex1q5 = document.forms['ex1']['exq5'].value;
var score = 0;
.
.
.


//Attach event like so 
      document.getElementById('submit1').addEventListener('click', checkAnswers1);

检查jsfiddle是否有完整代码。