使用DOM動態生成按鈕並編輯onclick事件

我試圖生成一個輸入（type =「button」）並將onclick-Event設置爲函數，該函數應交給一個參數。整個對象應該被附加到一個div並且它是。基本上this是我的嘗試，但我不明白爲什麼它不起作用。使用DOM動態生成按鈕並編輯onclick事件

我將代碼粘貼到jsfiddle，因此它更容易重現。點擊here。

我在做什麼錯了？我通過試驗和錯誤學習它，所以請解釋什麼是錯的。非常感謝！

[編輯]針對的jsfiddle將是一天下來，這裏是我試圖運行代碼... :)

<!doctype html> 
<html> 
<head> 
<title>onclick event example</title> 
<script type="text/javascript" language="javascript"> 
var i = 0; 
var h = new Array(); 

function addButton() { 
    i++; 
    var container = document.getElementById("check0"); 

    var h[i] = document.createElement("input"); 
    h[i].type = 'button'; 
    h[i].name = 'number' + i; 
    h[i].value = "number" + i; 
    h[i].id = 'number' + i; 

    h[i].onclick = function() { 
     showAlert(i) 
    }; 

    container.appendChild(h[i]); 
} 

function showAlert(number) { 
    alert("You clicked Button " + number); 
} 
</script> 
</head> 
<body> 
<div id="check0"> 
     <input type="button" value="klick mich" id="number0" onclick="addButton()"/> 
</div> 
</body> 
</html>

來源

2012-05-22 cvoigt

將代碼放在那裏。如果明天jsfiddle失敗怎麼辦？ –

Here是你的固定小提琴。

var h[i] = ...無效JavaScript。

你在jsfiddle的「JavaScript」框架中執行的內容是執行onload，所以當你提供的HTML被執行時（這兩個函數都不是addButton()函數），這段代碼還不存在。

<script> 
var i = 0; 
var h = new Array(); 

function addButton() { 
    i++; 
    var container = document.getElementById("check0"); 

    h[i] = document.createElement("input"); 
    h[i].type = 'button'; 
    h[i].name = 'number' + i; 
    h[i].value = "number" + i; 
    h[i].id = 'number' + i; 

    h[i].onclick = function() { 
     showAlert(i) 
    }; 

    container.appendChild(h[i]); 
} 

function showAlert(number) { 
    alert("You clicked Button " + number); 
} 
</script> 

<div id="check0"> 
    <input type="button" value="klick mich" id="number0" onclick="addButton()"/> 
</div>

來源

2012-05-22 16:30:38

把代碼放在那裏。如果明天jsfiddle失敗怎麼辦？ –

如果jsfiddle關閉，整個問題都沒有任何意義:)讓我試試... –

是的，我也加了一個評論的問題太:-) –

嘗試使用h.push(...)，而不是試圖發送到非創建的元素數組

來源

2012-05-22 16:31:42 Neal

  var x = document.getElementById('pagination');//pagination is an empty div in html 
    var y =''; 
    for(var i = 0; i <= (pageMax); i++){ 
     y = y+"<a id ='pageNumber"+i+"' onclick='changePage("+(i+1)+");'>"+(i+1)+"</a>\n "; 
     } x.innerHTML=y }

我用它來使一個表中的分頁英寸該功能將創建一行數字，直到按鈕最大。「changePage（「+（I + 1）+」）; ...將調用一個函數併發送頁面編號的i索引（頁面所在的編號）。我也動態地創建每個號碼唯一的ID。

來源

2012-05-22 18:31:19 GreenGiant

使用DOM動態生成按鈕並編輯onclick事件

回答

相關問題