的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的=「一些值」的變化不會反映

回答

相關問題