爲什麼我的javascript不能修改html？

假設在輸入字段和發送按鈕之間插入輸入的文本，但它會記錄。爲什麼我的javascript不能修改html？

<body>              
    <section> 
     <p>passcode: <input type=text id=passcode></p> 
     <section id=middle></section> 
     <p><input type=button id=button value=send></p> 
    </section> 
    <script type="text/javascript"> 
     var log=new Array(); 
     document.getElementById("button").onclick=exlog(); 
     exlog(){ 
      log.push(document.getElementById("passcode").value) 
      for(i=0;i<log.length;i++){ 
      document.getElementById("middle").innerHtml=log[i]; 
     } 
    } 
    </script> 
</body>

來源

2012-09-08 user1656125

變化

 document.getElementById("middle").innerHtml=log[i];

到

 document.getElementById("middle").innerHTML=log[i];

參考：https://developer.mozilla.org/en-US/docs/DOM/element.innerHTML

來源

2012-09-08 04:49:56

很好的捕獲。 +1 –

你真了不起！ :) – user1656125

你exlog功能缺失function關鍵字，你是不正確的設置onclick處理程序。

而且innerHtml應該innerHTML

document.getElementById("button").onclick=exlog; 
    function exlog(){ 
     log.push(document.getElementById("passcode").value) 
     for(i=0;i<log.length;i++){ 
     document.getElementById("middle").innerHTML=log[i]; 
    }

來源

2012-09-08 04:45:21 Musa

有什麼不對的onclick？ – user1656125

@ user1656125您稱爲exlog函數，而不是將其分配給onclick屬性 – Musa

您可以利用像這樣評價功能：exlog()，因爲艾克斯勞格沒有return語句，它的計算結果爲undefined，該瀏覽器將不會執行。

如果你想爲它分配你可以使用它的名字exlog

此外，由Teemu和穆薩提到，function關鍵字是從exlog

同樣的定義，innerHTML資本缺失必須是確切的，混合案件不會工作。

<body>        
    <section> 
     <p>passcode: <input type=text id=passcode></p> 
     <section id=middle></section> 
     <p><input type=button id=button value=send></p> 
    </section> 
    <script type="text/javascript"> 
     var log = []; 
     document.getElementById("button").onclick = exlog; // <== no need to evaluate the function, just assign it. 
     function exlog(){ // <== as pointed out below function keyword was missing 
      log.push(document.getElementById("passcode").value); 
      document.getElementById("middle").innerHTML += log[log.length - 1]; // <== needs to be capitilized exactly like this 
     } 
    </script> 
</body>

來源

2012-09-08 04:45:51

謝謝！我做了改變，它的工作原理。但是，我不明白你的意思是瀏覽器不會執行一個沒有返回的函數，是不是我們在這裏修復這個問題？ – user1656125

我的意思是，如果你運行這樣的函數：'exlog（）'，它的隱式返回值是'undefined'，瀏覽器不知道如何執行。 –

我知道它的返回值是未定義的，但函數執行，這只是我誤解的語義的東西嗎？而當我點擊發送它取代以前發送的內容。你知道如何連接多個條目嗎？感謝我真的很欣賞它。 – user1656125

我注意到幾個問題與您的代碼。最重要的是，你應該使用innerHTML，而不是innerHtml（注意大寫）。

此外，你需要小心你如何處理函數。只要把exlog（）{}不會創建一個函數。相反，你應該使用function關鍵字。

最後，你想設置onclick處理程序的功能exlog。你所用的實際上將onclick處理程序設置爲評估exlog函數的結果。

這裏的所有的修改建議的解決方案：

<body>        
<section> 
    <p>passcode: <input type=text id=passcode></p> 
    <section id=middle></section> 
    <p><input type=button id=button value=send></p> 
</section> 
<script type="text/javascript"> 
    var log=new Array(); 
    document.getElementById("button").onclick=exlog; 
    function exlog(){ 
     log.push(document.getElementById("passcode").value) 
     for(i=0;i<log.length;i++){ 
alert(log[i]); 
     document.getElementById("middle").innerHTML=log[i]; 
    } 
} 
</script> 
</body>

來源

2012-09-08 04:53:59

現在，使用'new Array（）'被認爲是壞風格。最好說'var log = [];'代替。尤其是，大多數人發現代碼更容易閱讀，並且'new Array（10）'結構的結果可能令人驚訝。 –

謝謝，忘了。 – user1656125

此外，html元素的屬性值應引用。 – some

爲什麼我的javascript不能修改html？

回答

相關問題