我的 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 很陌生
最佳答案
如果您所提供的示例代码就是您所拥有的,则缺少 Try2 和 A2。否则,请尝试使用全局变量来维护当前的“try”,而不是循环遍历元素来查找空元素。
示例 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 中,并在页面加载后检索它。看起来好像您将其作为参数传递,但在页面加载后并未检索它。
关于Javascript OnSubmit 第二次不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18065645/