使用JS循环将唯一的变量从HTML按钮发送到函数
使用JS循环将唯一的变量从HTML按钮发送到函数
提问于 2018-06-08 00:31:41
这里是初学者。我有一个循环来创建26个具有唯一ID和值的按钮。我正在努力找出正确的方法将按钮的ID发送给一个函数，这样我就可以为每个按钮单独存储唯一的变量，而不需要创建多个函数。我目前有一个数组，其中包含我的按钮所需的26个项和以下循环：
function makeButtons() {
for (var i = 0; i < 26; i++) {
document.getElementById("whereButtonsGo").innerHTML += "<input type = 'button' value = '" + items[i] + "' id = 'button" + items[i] + "' onclick = doThing(button" + items[i] + ")'>";
}
}我希望将onclick函数中的参数发送给一个函数，例如：
function doThing(id) {
document.getElementById("'" + id.value + "'").style.color = "pink";
}但到目前为止，我还没能让它工作。任何帮助都将不胜感激！
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-08 01:04:51
也许这就是你要找的：
makeButtons();
function makeButtons() {
for (var i = 0; i < 26; i++) {
document.getElementById("whereButtonsGo").innerHTML += "<input type = 'button' value = '" + i + "' onclick = doThing(this)>";
}
}
function doThing(currentButton) {
currentButton.style.color = "pink";
}<div id="whereButtonsGo"/>
尽量保持ID简单
Stack Overflow用户
发布于 2018-06-08 01:31:25
我建议不要使用innerHTML来创建您真正想做的元素。即使它可以工作，你的代码也会令人惊讶地不清楚。相反，编写代码来演示您实际上是在创建和添加元素：
var items = [1,2,3,4,5,6];
function makeButtons() {
var container = document.getElementById("whereButtonsGo");
for (var i = 0; i < items.length; i++) {
var button = document.createElement("button");
button.type = 'button';
button.value = items[i];
button.innerText = items[i];
button.id = 'button'+items[i];
button.onclick = doThing;
container.append(button)
}
}
function doThing() {
console.log('click of ' + this.id);
}
makeButtons();请注意，您不需要在事件的函数调用中传递id -单击的按钮将作为this可用。
这是一个fiddle。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50746164
复制相关文章
相似问题