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

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";
}

fiddle :https://jsfiddle.net/balleronde/tr8wntmL/

如何只在点击#btn1时才执行#div1的功能，而不是一次性执行所有功能？谢谢

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)

因此，您的代码最终会设置 #div(b) 的 innerHTML 属性和 onclick 属性#btn(b)!哎呀，这不是你想要的。

您真正想要的是在单击#btn(b)时设置#div(b)的innerHTML .

为此，您需要为 #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>

嗯..当我们点击按钮时，我们收到一个错误:“Uncaught TypeError: Cannot set property innerHTML of null”。哎呀!

让我们调查一下。当我们将 setTheText 函数的代码替换为记录 b 的代码时，会发生以下情况:

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>

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

基本上，问题是在 JavaScript 调用您的 onclick 函数之前，b 通过 for 循环更改为 5 .

所以我们真正需要做的是使用一个函数创建回调函数，以便回调函数可以记住它是用什么索引(b)创建的:

function makeSetTheText(b) {
  function setTheText() {
    document.getElementById('div' + b).innerHTML = 'HELLO WORLD'
  }
  return setTheText
}

for (var b = 1; b < 5; b++) {
  document.getElementById('btn' + b).onclick = makeSetTheText(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>

这仍然有点令人困惑，别担心，StackOverflow 上有很多关于闭包和函数如何生成函数的非常好的解释 here .

如果您已经做到了这一步，希望:

1. 您将学到一些有关调试的知识。
2. 您将会找到问题的解决方案。
3. 您将学到一些奇妙的 JavaScript 技巧。
4. 您会对我在输入此答案时遇到的延迟以及我所做的所有研究和测试表示同情。

希望这有帮助!