Поясните от непонятное место в коде Кантора? Как это так?

Question

[colorkid]

Всем привет.
Решил посмотреть как народ набрасывает обработчики событий на коллекции без jQuery, сам всегда делал это через цикл, но тут появилось мнение, что это не комильфо. Посмотрел на learn.javascript.ru такой пример...

var selectedTd;

table.onclick = function(event) {
  var target = event.target; // где был клик?

  if (target.tagName != 'TD') return; // не на TD? тогда не интересует

  highlight(target); // подсветить TD
};

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

Непонятна в коде следующая часть

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

В смысле if (selectedTd)? он же undifined? а потом у него удаляем класс... Как это так, что selectedTd становиться элементом из коллекции по которому не кликнули?

Далее в коде все понятно вроде и логично, а вот эту часть понять не могу.... Поясните пожалуйста что там происходит...

Answer 1

[Илья Серов]

При первом входе мы присвоим переменной selectedId значение node, и элементу добавим класс highlight, а вот при повторном вхождении тот элемент которому был добавлен класс теряет его, и мы добавляем класс к текущему элементу по которому кликнули, короче говоря ты кликаешь на один, потом на другой в итоге класс у второго появился а у первого потерялся, а если кликнул на первый же он у него и остался.

Comments

[colorkid]

все понятно спасибо.

Answer 2

[Владимир]

https://jsfiddle.net/o1xp1kur/
Вы правите глобальную переменную selectedTd, в ней и остается предыдущее значение.