Question

我有不同的div，每个div都有一个调用相同功能的按钮。

<div id="div1">. . .</div>
<button id="btn1" > INIT </button>
<div  id="div2">. . .</div>
<button id="btn2"> INIT </button>

棘手的部分是，每个按钮应该只对他自己的div（#btn1到#div1，#btn2到#div2等执行该功能，而不是对其他人执行。我编写的代码对每个div执行相同的功能，而不是单击按钮。我想答案很简单，但我无法弄清楚我做错了什么。

var b = 1;

for (var b = 1; b < 5 ; b++) {
    document.getElementById("btn" + b).onclick = 
    document.getElementById("div" + b).innerHTML = "HELLO WORLD";
}

小提琴：https://jsfiddle.net/balleronde/tr8wntmL/

如果仅在点击#div1时才能将功能执行到#btn1，而不是一次性执行所有功能？感谢

Answer 1

这是你的代码：

document.getElementById("btn" + b).onclick = 
document.getElementById("div" + b).innerHTML = "HELLO WORLD"

就JavaScript而言，它看起来像这样：

x = y = "HELLO WORLD"

当你这样做时会发生什么：

x =
y = "hello world"

console.log("x is:", x)
console.log("y is:", y)

因此，您的代码最终会设置innerHTML 的#div(b)属性和<{em> onclick #btn(b)属性！哎呀，那不是你想要的。

当您点击#div(b)时，您真正想要的是设置innerHTML的{{1}}。

为此，您需要将函数或回调分配给#btn(b)的{{1}}属性：

#btn(b)

onclick

嗯..当我们点击按钮时出现错误：“未捕捉function setTheText(b) { document.getElementById('div' + b).innerHTML = 'HELLO WORLD' } for (var b = 1; b < 5; b++) { document.getElementById('btn' + b).onclick = function() { setTheText(b) } }：无法设置<div id='div1'>Div 1</div> <div id='div2'>Div 2</div> <div id='div3'>Div 3</div> <div id='div4'>Div 4</div> <button id='btn1'>Button 1</button> <button id='btn2'>Button 2</button> <button id='btn3'>Button 3</button> <button id='btn4'>Button 4</button>的属性TypeError”。糟糕！

我们来调查吧。当我们将innerHTML函数的代码替换为记录null的内容时会发生以下情况：

setTheText

b

总是输出5！这没有多大意义。

在JavaScript调用function setTheText(b) { console.log(b) } for (var b = 1; b < 5; b++) { document.getElementById('btn' + b).onclick = function() { setTheText(b) } }函数之前，问题基本上是<button id='btn1'>Button 1</button> <button id='btn2'>Button 2</button> <button id='btn3'>Button 3</button> <button id='btn4'>Button 4</button>被b循环更改为5。

所以我们真正需要做的是使用一个函数来创建回调函数，这样回调函数就能记住它创建的索引（for）：

onclick

b

这仍然有点令人困惑，不用担心，对于如何在StackOverflow here上生成函数的闭包和函数有很多很好的解释。

如果你已经做到这一点，希望：

您将学习一些有关调试的知识。

你已经找到解决问题的方法。

你会学到很多花哨的JavaScript技巧。

你会对我在输入这个答案时所要处理的滞后量以及我所做的所有研究和测试表示同情。

希望这有帮助！

Answer 2

我认为你想要这样的东西：

使用参数

创建函数处理程序

function myAwesomeHandler(param){
   document.getElementById("div" + param).innerHTML = "HELLO WORLD";
};

绑定此处理程序，因此将使用计数器值作为参数调用处理程序。查看有关bind

的文档

for (var b = 1; b < 5 ; b++) {
    document.getElementById("btn" + b).onclick = myAwesomeHandler.bind(this, b);
}

虽然使用不同的html有更优雅的方法，但我假设您已经预定义了html结构并且只展示了“仅js”方法。

Answer 3

试试这个，

<div id="div1">. . .</div>
<button id="btn1" onclick="changeText('div1')"> INIT </button>
<div  id="div2">. . .</div>
<button id="btn2" onclick="changeText('div2')"> INIT </button>

并创建一个函数，

function changeText(divId){
        document.getElementById(divId).innerHTML = 'some text';
    }

getElementById +变量控制另一个getElementById +变量

3 个答案: