嘗試添加內部html時按鈕單擊時出現Javascript錯誤

Question

我正在學習javascript，並且在此腳本中，我試圖在點擊一個按鈕時插入一個簡單的文本行。我嘗試了兩種方法，都給我一個錯誤。

<input type="button" value="getValue" id="getValue" /> 
<div id="rowgen"></div> 

(function(){ 
    window.onload = function() { 

    // Code to display a google map on page 
    //... 

    document.getElementById("getValue").onclick = function(){ 
     document.getElementById.innerHTML('rowgen') += '<p>Hello world</p>'; 
    }; 

    } 
})(); 

我得到的錯誤Uncaught ReferenceError: Invalid left-hand side in assignment爲線document.getElementById.innerHTML('rowgen') += '<p>Hello world</p>';

對於第二個方法，我想：

<input type="button" value="getValues" id="getValues" onclick="genRow()"/> 
<div id="rowgen"></div> 

(function(){ 
    window.onload = function() { 

    // Code to display a google map on page 
    //... 

    function genRow(){ 
     document.getElementById.innerHTML('rowgen') += '<p>Hello world</p>'; 
    } 

    } 
})(); 

這一次我得到了HTML錯誤檔案Uncaught ReferenceError: genRow is not defined就行<input type="button" value="getValues" id="getValues" onclick="genRow()"/>

Answer 1

genRow需要在您的onload區塊之外。它在你打電話時還不存在。

此外，您的通話getElementById以下修正：

function genRow(){ 
    document.getElementById('rowgen').innerHTML += '<p>Hello world</p>'; 
} 

(function(){ 
    window.onload = function() { 

    // Code to display a google map on page 
    //... 

    } 
})(); 

Answer 2

我不認爲你很瞭解innerHTML作品;這是你的對象的屬性：

document.getElementById('rowgen').innerHTML += '<p>Hello world</p>'; 

你的函數應該工作。

我會避免內嵌onclick屬性，但如果必須使用它們，你不得不暴露你的方法對全球window，像這樣：

window.genRow = function() { 
    // Code 
};