Javascript OnSubmit не работает во второй раз

Question

Моего Javascript сценария, предполагают, чтобы заменить внутренний HTML в виде сНа элемента каждый раз, когда форма представить не работает во второй раз

Вот мой код Javascript :

function TryCode(code, gametype, gameid) { 
    var tries = "1"; 
    for (var i = 1; i <= 10; i++) { 
     var element = document.getElementById("A" + i).innerHTML; 
     var element2 = element.replace(/^\s+/, ''); 
     if (element2 == '') { 
      tries = i; 
      break; 
     } else { 
      continue; 
     } 
    } 

    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      if (xmlhttp.responseText == 'success') { 
       ActivateUnloadComfirmation = "0"; 
       document.location.href = "index.php?success=1"; 
      } else if (xmlhttp.responseText == 'fail') { 
       ActivateUnloadComfirmation = "0"; 
       document.location.href = "index.php?fail=1"; 
      } else { 
       document.getElementById("Try" + tries).innerHTML = xmlhttp.responseText; 
      } 
     } 
    } 
    xmlhttp.open("GET", "system/trylogger.php?code=" + code + "&tries=" + tries + "&gameid=" + gameid + "&gametype=" + gametype, true); 
    xmlhttp.send(); 
} 

HTML DIV КОД

<table width="40%"> 
<tr> 
    <td id="Try1" width="58%"> 
     <div class="tries_container" style="float: left;margin-right: 49px;"> 
     </div> 
     <div class="tries_container" style="width: 15px;float: left;margin-right: 8px;" id="A1"> 
     </div> 
     <div class="tries_container" style="width: 15px;float: left;"> 
     </div> 
    </td> 
</tr> 

HTML ФОРМА КОД

<form onsubmit="TryCode(this.code.value, '{$GameType}', '{$GameID}'); return false;"> 
<input type="text" name="code" maxlength="4" pattern="[0-9]{4}" title="4 digit code" placeholder="Code" required> 
</br> 
</br> 
<input type="submit" id="try_button" value="Try This Code"> 

Во-первых, это действительно изменяет внутренний HTML ид Try1, но когда я снова нажмите кнопку отправки, она не меняет внутреннюю HTML из Try2.

Извините за мой плохой код, я очень новый с Javascript

Answer 1

Если пример кода вы предоставили все, что вам есть, Try2 и A2 отсутствует. В противном случае попробуйте сохранить текущую «попытку», используя глобальную переменную, вместо того, чтобы прокручивать элементы, чтобы искать пустой.

Пример HTML:

<tr> 
<td id="Try1" width="50%"> 
    <div class="tries_container" style="float: left;margin-right: 49px;"> 
    </div> 
    <div class="tries_container" style="width: 15px;float: left;margin-right: 8px;" id="A1"> 
    </div> 
    <div class="tries_container" style="width: 15px;float: left;"> 
    </div> 
</td> 
<td id="Try2" width="50%"> 
    <div class="tries_container" style="float: left;margin-right: 49px;"> 
    </div> 
    <div class="tries_container" style="width: 15px;float: left;margin-right: 8px;" id="A2"> 
    </div> 
    <div class="tries_container" style="width: 15px;float: left;"> 
    </div> 
</td> 

Значительно упрощена Javascript:

var tries = 1; 

function TryCode(code, gametype, gameid) { 
    document.getElementById("Try" + tries).innerHTML = "TEST"; 
    tries++; 
} 

В моем примере "Try2" и элементов "А2" добавляются и "пытается" перемещается за пределы функции становясь глобальной переменной «try», которую я могу использовать во всем приложении.

Кроме того, если вам необходимо сохранить количество попыток через разные загрузки страницы, вам придется поместить его в URL-адрес в качестве параметра и получить его после загрузки страницы. Кажется, вы передаете его как параметр, но вы не извлекаете его после загрузки страницы.

This tells you how to do that.