如何獲得創建的元素（一個按鈕）來運行一個函數？

這是我用於創建按鈕的代碼：如何獲得創建的元素（一個按鈕）來運行一個函數？

var dfom = document.createElement('div'); 
dfom.setAttribute("id","options"); 
dfom.innerHTML = "<input type=\"button\" value=\"Say HI\" onclick=\get()\ />"; 
dfom.style.padding = '10px'; 
document.body.insertBefore(dfom, document.body.firstChild);

該按鈕細創建的;它顯示正確。因此，爲了測試它，我這樣做：

function get() 
{ 
alert("HI"); 
}

然而，當我按一下按鈕沒有任何反應。請幫忙嗎？謝謝！

來源

2013-03-26 MathMan08

您應該使用'firstChild'而不是'children [0]'。 – VisioN 2013-03-26 22:45:37

哈，謝謝......但仍然沒有解決我的大問題。 – MathMan08 2013-03-26 22:49:42

在** body元素存在後，您的代碼是否正在運行**？ – RobG 2013-03-26 22:54:02

的\應該在get()\"，但也有更多的考慮：即get函數實際上必須在onload之外定義或另一個回調，因爲它需要全局可用。您需要類似這樣的設置：

http://jsfiddle.net/CZ2y4/

...定義get外onLoad回調，這使得它適用於onclick的。

此外，使用標準事件綁定，而不是onclick：

dfom.innerHTML = "<input type=\"button\" value=\"Say HI\">"; 
dfom.firstChild.addEventListener('click', get);

http://jsfiddle.net/CZ2y4/1/

來源

2013-03-26 22:57:18

也很棒！（PS：我明白爲什麼了，謝謝你！） – MathMan08 2013-03-26 23:00:28

...並儘量避免使用'innerHTML'，因爲它的速度很慢。 – VisioN 2013-03-26 23:01:16

+1這是反斜線，沒有下面的雙引號是問題。語句'get函數實際上必須在元素創建之前定義'是不正確的，函數定義將始終在任何代碼運行之前處理，因此它將始終在創建按鈕之前定義（如果按鈕是由代碼，因爲它是）。 – RobG 2013-03-26 23:04:45

函數名稱也應該用引號引起來，即onClick="get();"。也請在事件監聽器上隨時閱讀，例如here。

來源

2013-03-26 22:42:40 0sh

這樣做沒有幫助。我將其更改爲：dfom。innerHTML =「」; – MathMan08 2013-03-26 22:48:00

+1 - 但屬性名稱的大小寫是不相關的。 ;-) – RobG 2013-03-26 22:49:46

@RobG舊習慣難改;） – 0sh 2013-03-26 22:51:04

如果你想寫正確的JavaScript代碼，那麼你應該如下做到這一點：

var dfom = document.createElement("div"), 
    button = document.createElement("input"); 

button.type = "button"; 
button.value = "Say HI"; 
button.addEventListener("click", function() { 
    alert("HI"); 
}, false); 

dfom.id = "options"; 
dfom.style.padding = "10px"; 
dfom.appendChild(button); 

document.body.insertBefore(dfom, document.body.firstChild);

DEMO：http://jsfiddle.net/TKdYh/

來源

2013-03-26 22:53:11 VisioN

你，先生，是上帝！非常感謝。 – MathMan08 2013-03-26 22:57:38

@ user2213591還不是上帝:)但學習好的編程風格從不遲到。 – VisioN 2013-03-26 22:59:04

下面的工作對我來說：

window.onload = function() { 
    var dfom = document.createElement('div'); 
    dfom.id = "options"; 
    dfom.innerHTML = '<input type="button" value="Say HI" onclick="get()">'; 
    dfom.style.padding = '10px'; 
    document.body.insertBefore(dfom, document.body.children[0]); 
} 

function get() { 
    alert("HI"); 
}

需要注意以下幾點：

對於標準的DOM屬性，通常設置屬性通常會更好，不要使用setAttribute，因爲它不一致。
它更清晰使用腳本和makrup雙引號單引號，這樣你就不必使用盡可能多的反斜線報價報價
嚴格，HTML屬性值只需要被引用if they contain certain characters 。只是引用它們而不是記住那些字符是什麼。瀏覽器也是非常寬容的，所以你可以避開沒有加引號的字符，這些字符應該在某些瀏覽器中引用，而不是其他的。

來源

2013-03-26 23:02:36 RobG

謝謝Rob。我會記得下次。 – MathMan08 2013-03-28 04:29:29

如何獲得創建的元素（一個按鈕）來運行一個函數？

回答

相關問題