Объявите переменную let без присвоения значения в Javascript, почему это так?

Question

Я нашел это на Javascript.info: введите здесь описание ссылки.

Ну, это демонстрация делегирования событий: таблица с 9 ячейками, когда мы щелкаем одну из ячеек, ячейка (event.target) меняет свой цвет на красный, а ячейка, которую мы щелкнули только что, вернется к своему исходному цвету.

И я блуждаю, как это возможно объявить переменную let selectedTd без присвоения значения? (Я сделал комментарий в коде js, чтобы показать вам, где код меня смущает). Спасибо за вашу помощь.

let table = document.getElementById('bagua-table');

    let selectedTd;

    table.onclick = function(event) {
      let target = event.target;

      while (target != this) {
        if (target.tagName == 'TD') {
          highlight(target);
          return;
        }
        target = target.parentNode;
      }
    }

    function highlight(node) {
      if (selectedTd) {  // what does the "selectedTd" representes while it doesn't even has a value ?  
        selectedTd.classList.remove('highlight');
      }
      selectedTd = node;
      selectedTd.classList.add('highlight');
    }

#bagua-table th {
  text-align: center;
  font-weight: bold;
}

#bagua-table td {
  width: 150px;
  white-space: nowrap;
  text-align: center;
  vertical-align: bottom;
  padding-top: 5px;
  padding-bottom: 12px;
}

#bagua-table .nw {
  background: #999;
}

#bagua-table .n {
  background: #03f;
  color: #fff;
}

#bagua-table .ne {
  background: #ff6;
}

#bagua-table .w {
  background: #ff0;
}

#bagua-table .c {
  background: #60c;
  color: #fff;
}

#bagua-table .e {
  background: #09f;
  color: #fff;
}

#bagua-table .sw {
  background: #963;
  color: #fff;
}

#bagua-table .s {
  background: #f60;
  color: #fff;
}

#bagua-table .se {
  background: #0c3;
  color: #fff;
}

#bagua-table .highlight {
  background: red;
}

  <table id="bagua-table">
    <tr>
      <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
    </tr>
    <tr>
      <td class="nw"><strong>Northwest</strong>
        <br>Metal
        <br>Silver
        <br>Elders
      </td>
      <td class="n"><strong>North</strong>
        <br>Water
        <br>Blue
        <br>Change
      </td>
      <td class="ne"><strong>Northeast</strong>
        <br>Earth
        <br>Yellow
        <br>Direction
      </td>
    </tr>
    <tr>
      <td class="w"><strong>West</strong>
        <br>Metal
        <br>Gold
        <br>Youth
      </td>
      <td class="c"><strong>Center</strong>
        <br>All
        <br>Purple
        <br>Harmony
      </td>
      <td class="e"><strong>East</strong>
        <br>Wood
        <br>Blue
        <br>Future
      </td>
    </tr>
    <tr>
      <td class="sw"><strong>Southwest</strong>
        <br>Earth
        <br>Brown
        <br>Tranquility
      </td>
      <td class="s"><strong>South</strong>
        <br>Fire
        <br>Orange
        <br>Fame
      </td>
      <td class="se"><strong>Southeast</strong>
        <br>Wood
        <br>Green
        <br>Romance
      </td>
    </tr>

  </table>

javascript variable-assignment variable-declaration event-delegation

-1

Herma 25 Ноя 2022 в 21:56

2

Это то же самое, что присвоить undefined (что неверно).

–

CherryDT

25 Ноя 2022 в 22:00

Answer 1

Давайте проследим поток, В начале

selectedId не определен
вы щелкаете ячейку, и функция запускается
Игнорируется условие If для удаления выделения, поскольку ранее выбранной ячейки не было.
Он выделяет ячейку и заставляет selectedId содержать значение этого узла, после чего функция завершает работу.
Я щелкаю другую ячейку, теперь выполняется условие If, удаляющее выделение текущей ячейки, и повторяется шаг 4.

1

Ali Osman 25 Ноя 2022 в 22:03

Answer 2

В первый раз, когда код входит в функцию onclick, его значение не определено (поскольку tds еще не выбрано), поэтому он не входит в оператор if и выполняет следующую строку после него:

selectedTd = node;

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

1

Amirhossein 25 Ноя 2022 в 22:03

Answer 3

 function highlight(node) {
      if (selectedTd) {  
        selectedTd.classList.remove('highlight');
      }
      selectedTd = node;
      selectedTd.classList.add('highlight');
    }

SelectedTd начинается как undefined, этот оператор if проверяет, является ли он истинным или возвращает значение, и удаляет ли он класс 'hightlight'.

 if (selectedTd) {  
        selectedTd.classList.remove('highlight');
      }

Если этот selectedTd возвращает undefined, false или не имеет значения, здесь мы устанавливаем его равным node и добавляем класс «highlight».

          selectedTd = node;
          selectedTd.classList.add('highlight');

Здесь мы передаем node в функцию выделения, где, если целью, которую мы выбираем, является элемент td, передаем его в функцию выделения и устанавливаем selectedTd = для цели.

while (target != this) {
        if (target.tagName == 'TD') {
          highlight(target);
          return;
        }

1

Cloud 25 Ноя 2022 в 22:12

Объявите переменную let без присвоения значения в Javascript, почему это так?

3 ответа

Похожие вопросы

Новые вопросы

javascript