Установите метод onclick для элемента в al oop, используя локальные переменные, не активируя его немедленно - PullRequest
1 голос
/ 24 апреля 2020

У меня есть для l oop, в котором я использую локальную переменную из l oop в качестве параметра для обратного вызова события onclick. Я делаю это в соответствии с тем, что я прочитал в этих сообщениях:

Передача параметра onclick, в al oop

Javascript - Динамически назначать событие onclick в l oop

Однако проблема, с которой я сталкиваюсь, заключается в том, что функция onclick вызывается только один раз, сразу, а затем никогда больше. Я нашел потенциальное решение в этом посте:

Javascript функция onclick вызывается немедленно (не при нажатии)?

За исключением того, что этот пример работает, только если Функция onclick не принимает параметров.

ТАК. Как нам обоим A) установить onclick, используя локальную переменную в al oop, и B) правильно ли вызывать его при нажатии, а не только один раз в первый раз?

Вот пример:

https://jsfiddle.net/jq7wbxaz/24/

function generateCard() {
  for(var n = 0; n < 5; n++) {
    for(var k = 0; k < 5; k++) {
      var cell = document.createElement("div");
      cell.setAttribute("class", "box");
      cell.setAttribute("id", "r"+n+"c"+k);
      var letter;
      switch(k) {
        case 0:
            letter = "B";
          break;
        case 1:
            letter = "I";
          break;
        case 2:
            letter = "N";
          break;
        case 3:
            letter = "G";
          break;
        case 4:
            letter = "O";
          break;

      }
      cell.innerHTML = letter + n;
      cell.onclick = (function(c) {changeCellColor(c);})(cell);

      document.getElementById("card").appendChild(cell);
    }
  }
} 

function changeCellColor(cell) {
    //var cell = getCell(n, k);
  console.log("Changing color for cell " + cell.id);
    cell.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
}

generateCard();

В этой скрипте генерируется карта bin go. Требуемое поведение для каждой коробки карты, чтобы иметь функцию onclick, которая изменяет цвет этих ящиков. Вместо этого все они имеют случайный цвет в начале, и onclick не работает.

Буду признателен за любую помощь!

1 Ответ

1 голос
/ 24 апреля 2020

Вы захотите сослаться на this в функции, которую вы вызываете при нажатии на ячейку. Это относится к элементу ячейки.

Итак, ваша функция onclick станет такой:

cell.onclick = function() { changeCellColor(this) };

Больше примеров здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...