Javascript OnSubmit 第二次无法正常工作

Question

我的 javascript 脚本假设每次提交表单时都会替换 div 元素的内部 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">

一开始，它确实改变了 id Try1 的内部 HTML，但是当我再次点击提交按钮时，它并没有改变 Try2 的内部 HTML。

抱歉我的代码不好，我是 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”和“A2”元素，并将“tries”移出函数，成为我可以在整个应用程序中使用的全局“tries”变量。

此外，如果您需要通过不同的页面加载来保持尝试次数，您必须将其作为参数放入 URL 并在页面加载后检索它。看起来好像您将它作为参数传递，但在页面加载后您没有检索它。

This tells you how to do that.