getElementById + переменная, управляющая другой переменной getElementById +

Question

У меня есть разные divs, каждая из которых имеет кнопку, вызывающую ту же функцию.

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

Tricky часть является то, что каждая кнопка должна выполнять только функцию к своему 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)иonclick свойства #btn(b)! Ой, это не то, что ты хочешь.

Что вы действительно хотите для #div(b)'s innerHTML, которое будет установлено при нажатии на #btn(b).

Чтобы сделать это, вам нужно назначить функцию, или обратного вызова, чтобы #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:

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! Это не имеет большого смысла.

В основном проблема b изменяется на 5 на цикл for до того, как JavaScript называет вашу функцию onclick.

Так что нам действительно нужно сделать, это использовать функцию для создать функцию обратного вызова, так что функция обратного вызова может вспомнить, что индекс (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. У вас будет некоторое сочувствие относительно количества отставания, с которым мне пришлось иметь дело, набрав этот ответ, и все исследования и испытания, которые я сделал.

Надеюсь, это поможет!

Answer 2

Я предполагаю, что вы хотите что-то вроде этого:

Создать функцию-обработчик с параметром

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

Bind этот обработчик, поэтому обработчик будет вызываться с значением счетчика в качестве параметра. Проверьте документацию о 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'; 
    }