javascript 动态按钮javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7065742/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamic button javascript
提问by myol
had a look for a guide on this but couldn't really find anything specific on it, and thought you guys could help.
找了一个关于这方面的指南，但找不到任何具体的东西，并认为你们可以提供帮助。
I have a javascript file which performs various tasks onLoad. Currently I have 5 buttons in an HTML page but what I would like to do is to is read from an array in the js file and dynamically create a number of buttons depending what was in the array.
我有一个 javascript 文件，它在加载时执行各种任务。目前我在 HTML 页面中有 5 个按钮，但我想做的是从 js 文件中的数组中读取并根据数组中的内容动态创建多个按钮。
Similarly I want the buttons on click to be 'listened' for (alter an array in the js)
同样，我希望单击按钮被“监听”（更改 js 中的数组）
I have an idea that I want to read the array elements and set them as the button IDs and create them. Likewise I want to listen to what button has been clicked by its ID and have it alter an array. But how do I actually go about that process?
我有一个想法，我想读取数组元素并将它们设置为按钮 ID 并创建它们。同样，我想听听它的 ID 单击了什么按钮并让它改变一个数组。但我实际上如何进行该过程？
Cheers
干杯
采纳答案by DaveRandom
Something like this...?
这种东西……？
<html>
<head>
<script type="text/javascript">
var arrayToModify = [];
window.onload = function () {
var i, buttonsToCreate, buttonContainer, newButton;
buttonsToCreate = ['button1','button2','button3','button4','button5'];
buttonContainer = document.getElementById('this_element_contains_my_buttons');
for (i = 0; i < buttonsToCreate.length; i++) {
newButton = document.createElement('input');
newButton.type = 'button';
newButton.value = buttonsToCreate[i];
newButton.id = buttonsToCreate[i];
newButton.onclick = function () {
alert('You pressed '+this.id);
arrayToModify[arrayToModify.length] = this.id;
};
buttonContainer.appendChild(newButton);
}
};
</script>
</head>
<body>
<div id='this_element_contains_my_buttons'></div>
<input type='button' onclick='alert(arrayToModify);' value='Show the buttons I have clicked' />
</body>
</html>
EDIT: I have just added some functionality to track button presses in an array, as requested in the comment above
编辑：我刚刚添加了一些功能来跟踪数组中的按钮按下情况，如上面评论中所要求的
回答by Spycho
I would advise you use jQuery for this. It would make it a lot simpler.
我建议您为此使用 jQuery。它会让事情变得简单很多。
Firstly, to create the buttons from an array of button ids you could do something along the lines of the following:
首先，要从按钮 id 数组创建按钮，您可以按照以下方式进行操作：
var buttons = ['start', 'stop', 'foo', 'bar'];
for(var i = 0; i < buttons.length; i++){
$('<button>')
.attr('id', buttons[i])
.text(buttons[i])
.appendTo('div');
}
Next, to listen for the button clicks, you could modify the above as follows:
接下来，要监听按钮点击，你可以修改上面的内容如下：
var buttons = ['start', 'stop', 'foo', 'bar'];
var clicks = [];
for(var i = 0; i < buttons.length; i++){
$('<button>')
.attr('id', buttons[i])
.text(buttons[i])
.appendTo('div')
.click(function(){
clicks.push(this.id);
});
}
I'm not quite sure what you want to do on-click. Could you elaborate?
我不太确定你想在点击时做什么。你能详细说明一下吗？
Here'sa jsFiddle demonstrating the solution.
这是一个 jsFiddle 演示解决方案。
回答by Alex Turpin
Use the eventproperty of the event listener to get the target element, then it's ID:
使用event事件监听器的属性获取目标元素，然后是ID：
foo.onclick = function(event) {
alert(event.target.id);
}
