Создание кнопок с JS, которое сохраняет переменную при создании - PullRequest
Новая
       3

Создание кнопок с JS, которое сохраняет переменную при создании

0 голосов
/ 07 февраля 2020

Я создаю таблицу HTML, используя JavaScript.

Я хочу добавить кнопку в ячейку с индексом 5 в каждой строке.

console.log(i) перед btn.onclick ... записывает значение i, но при нажатии разных кнопок все выходы одинаковы и всегда равны 10.

Я полагаю, это потому, что переменная в функции обновляется.

Как сделать так, чтобы кнопка в каждой строке выводила значение i, когда кнопка "создана"

Посмотрите на мой код 

var tableRef = document.getElementById("my_table").getElementsByTagName("tbody")[0];
var i;

for (i = 0; i < 10; i++) {
  var newRow = tableRef.
  newCell = newRow.insertCell(5);

  btn = document.createElement('input');
  btn.type = "button";
  btn.className = "btn";
  btn.value = "My button";

  console.log(i);

  btn.onclick = function() {
    console.log(i);
  };

  newCell.appendChild(btn);
}

1 Ответ

0 голосов
/ 07 февраля 2020

Позволяет пошагово выполнять JavaScript.

  1. Вы получаете доступ к таблице
  2. Вы создаете l oop, который повторяется от 0 до 9 (10 шаги)
  3. На каждом шаге вы создаете кнопку и назначаете функцию прослушивателя событию onclick.
  4. Функция прослушивателя сохраняет ссылку на переменную i.
  5. Когда вы l oop дойти до конца
  6. Все ваши элементы отрисованы на экране и доступны кнопки
  7. В данный момент i переменная равна 9.
  8. Вы нажимаете кнопку.
  9. После нажатия кнопки ваша функция go переходит в переменную i и получает значение.
  10. Значение i равно 9, и поэтому оно печатает 9.

Чтобы исправить это, вы можете переместить var i; в оператор l oop и заменить var на let.

См. пример ниже 

var tableRef = document.getElementById("my_table").getElementsByTagName("tbody")[0];

for (let i = 0; i < 10; i++) { // Use let here
  var newRow = tableRef.
  newCell = newRow.insertCell(5);

  btn = document.createElement('input');
  btn.type = "button";
  btn.className = "btn";
  btn.value = "My button";

  console.log(i);

  btn.onclick = function() {
    console.log(i);
  };

  newCell.appendChild(btn);
}

Для получения дополнительной информации вы можете прочитать статью

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

...