Использование JS-циклов для отправки уникальных переменных из HTML-кнопок для работы

Question

Начинающий здесь.У меня есть цикл, который создает 26 кнопок с уникальными идентификаторами и значениями.Я пытаюсь найти правильный способ отправки идентификатора кнопки в функцию, чтобы я мог сохранять уникальные переменные для каждой кнопки независимо, не создавая более одной функции.В настоящее время у меня есть массив из 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"; 
}

Но до сих пор я не смог заставить это работать.Любая помощь будет принята с благодарностью!

Answer 1

Я не рекомендую использовать 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();

Обратите внимание, что вам не нужно передавать идентификатор в вызове функции для события - нажатая кнопка будетбыть доступным как this.

Вот скрипка .

Answer 2

Может быть, это то, что вы ищете:

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"/>

Постарайтесь сделать идентификаторы максимально простыми