我有下面提到的代码,innerHTML 所做的更改不会反射(reflect)在浏览器中
<body>
<script TYPE="text/javascript">
function change(){
document.getElementById("op").innerHTML="this works!";
prompt(document.getElementById("op").innerHTML);
}
</script>
<form onSubmit="change()">
<table>
<tr>
<td id="a1">This</td>
<td id="a2"><input type="text" id="t1"></td>
</tr>
</table>
<input type="submit" value="submit">
</form>
//输出
<table>
<tr><td id="op"></td></tr>
</table>
</body>
</html>
如提示所示,更改确实发生,但未反射(reflect)在页面上。
最佳答案
JavaScript 是单线程的。在将值分配给 innerHTML
的函数完成之前,浏览器不会运行重绘事件。
在提示(这是一个阻塞函数)被清除之前,该函数不会完成。
此时,由于它是由提交按钮触发的,因此将立即提交表单并加载新页面(这将使表格单元格的内容恢复到原始状态)。
取消表单的默认事件。
90 年代风格:
function change()
{
document.getElementById("op").innerHTML="this works!";
prompt(document.getElementById("op").innerHTML);
return false;
}
onSubmit="return change()">
现代风格:
function change(event)
{
event.preventDefault();
document.getElementById("op").innerHTML="this works!";
prompt(document.getElementById("op").innerHTML);
}
document.querySelector('form').addEventListener("submit", change);
关于javascript - document.getElementById ('id' ).innerHTML ="some value"更改未反射(reflect),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25820727/