代碼的第一部分工作正常,但現在每個按鈕都出現了,我如何爲每個按鈕添加功能?目前唯一按下的按鈕總是最後一個,其他什麼也不做。如何爲每個按鈕添加功能?
-1
A
回答
0
將其更改爲
{
var output = "";
var data = JSON.parse(e.target.responseText);
for(var i=0; i<data.length; i++)
{
output = data[i].title + ' ';
var p = document.createElement("p");
var div = document.getElementById("response");
var textNode = document.createTextNode(output);
p.appendChild(textNode);
var button = document.createElement("button");
button.innerHTML = "Download";
p.appendChild(button);
div.appendChild(p);
button.addEventListener ("click",() =>
{
alert("Test");
});
}
}
+0
好像當我這樣做時,java腳本的第一位不再執行任何操作 – hithere
0
你出添加下面的代碼側的for循環
button.addEventListener ("click",() =>
{
alert("Test");
});
保持上面的代碼中的for循環。因此,對於每個按鈕,將添加事件偵聽器。
+0
唯一的問題是,當我將它添加到循環中時,所有的javascript停止工作 – hithere
0
另一種方式來處理,這將是對回調函數添加到元素的原型的onclick
變量:
function doStuff() {
var output = "";
var data = JSON.parse(e.target.responseText);
for (var i = 0; i < data.length; i++) {
output = data[i].title + ' ';
var p = document.createElement("p");
var div = document.getElementById("response");
var textNode = document.createTextNode(output);
p.appendChild(textNode);
var button = document.createElement("button");
button.innerHTML = "Download";
// Adds the callback function here
button.onclick =() => {
// fill in your arrow function here...
alert("Test");
};
p.appendChild(button);
div.appendChild(p);
};
}
doStuff();
Here是的jsfiddle
0
您應該使用event delegation動態添加元素
// sample data
var data = [{
title: 'one'
}, {
title: 'two'
},{
title: 'three'
}];
var output = "";
for (var i = 0; i < data.length; i++) {
var output = data[i].title + " ";
var p = document.createElement("p");
var div = document.getElementById("response");
var textNode = document.createTextNode(output);
p.appendChild(textNode);
var button = document.createElement("button");
// added output to button text for identification
button.innerHTML = output + " Download";
p.appendChild(button);
div.appendChild(p);
}
// Get the parent element, add a click listener
document.getElementById("response").addEventListener("click", function(e) {
// e.target is the clicked element!
// If it was a button
if (e.target && e.target.nodeName == "BUTTON") {
// Button found! Output the identifying data!
// do other work on click
document.getElementById("display").innerHTML = e.target.innerHTML + " Clicked";
}
});
<div id="response"></div>
<div id="display">Display</div>
相關問題
- 1. 動態地添加按鈕,並添加每個按鈕不同的功能
- 2. 我如何能在表中添加圖像爲每個按鈕
- 3. 如何爲HTML添加一個按鈕,一個div並添加點擊功能
- 4. 添加按鈕功能
- 5. 如何添加一個等待功能,直到按下按鈕?
- 6. 爲每個按鈕添加聲音
- 7. 按鈕矩陣/多按鈕+功能爲每一個
- 8. 如何爲每個單元添加一個按鈕?
- 9. 如何在單擊單選按鈕上添加兩個功能
- 10. 如何專用功能添加一個按鈕,在VB.NET
- 11. 如何向按鈕添加第二個功能?
- 12. 如何添加另一個功能來改變屏幕按鈕?
- 13. 如何將「默認按鈕」功能添加到Swing中的兩個按鈕?
- 14. 如何將功能添加到我的成功按鈕?
- 15. 如何爲每個未點擊的按鈕添加點數?
- 16. 如何爲LIstView中的每一行添加一個按鈕?
- 17. 獲得添加按鈕作爲一個功能
- 18. 如何添加一個按鈕作爲
- 19. 添加功能,動態按鈕在C#
- 20. 添加功能的Android按鈕
- 21. 向按鈕添加自定義功能
- 22. 添加功能按鈕使用Pyqt5
- 23. 添加瀏覽功能按鈕-python
- 24. 添加功能提交按鈕
- 25. 如何執行按鈕上的每個功能點擊
- 26. 如何通過幻燈片切換功能爲每個按鈕添加各種隱藏的div(內容)
- 27. 綁定按鈕用Kivy語言添加按鈕後功能
- 28. 如何向按鈕添加滑動功能?
- 29. 如何在webview中添加後退按鈕功能?
- 30. 如何將功能添加到Gmail中的HTML按鈕中
執行'button.addEventListener(...)'_in_而不是在循環之後。 – Andreas
也許如果你沒有使用完全的任意縮進,你可以更清楚地看到程序流程中的錯誤。 –
對不起,我已經把它整理好了 – hithere