Почему функция JavaScript работает только один раз?

Question

EDIT: Я понимаю, что я не включил теги 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 на полный код.