的document.getElementById（“ID”）。innerHTML的=“一些值”的变化不会反映

我已经下面提到的代码，由innerHTML的所做的更改并不在浏览器中反映的document.getElementById（“ID”）。innerHTML的=“一些值”的变化不会反映

<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>

所做的更改确实发生，如提示所示，但不反映在页面上。

来源

2014-09-13 igauravkamat

的页面将被更新。 http://jsfiddle.net/8gq155ap/ – 2014-09-13 07:04:59

http://jsfiddle.net/arunpjohny/k76tadte/1/ – 2014-09-13 07:06:25

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);

来源

2014-09-13 07:05:34 Quentin

这也许在Firefox中是正确的，但在Chrome（刚刚测试过）中，它确实会触发重绘，因为线程是由'prompt'暂停（带/不带'preventDefault'） – 2014-09-13 07:08:45

嗨，感谢您的超快速帮助！ – igauravkamat 2014-09-13 07:10:19

的document.getElementById（“ID”）。innerHTML的=“一些值”的变化不会反映

回答

相关问题