Объясните как работает данный код?

Question

[Ольга]

var selectedButton;

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

}

Answer 1

[Kovalsky]

// Объявление переменной, которая будет доступна для функции highlight
var selectedButton;

function highlight(node) {
    // Если существует активная кнопка
    if (selectedButton){
        // то снять с неё класс highlight
        selectedButton.classList.remove('highlight');
    }
    // Теперь выбранной кнопкой считается переданный элемент
    selectedButton = node;
    // Поэтому вешаем на него класс highlight
    selectedButton.classList.add('highlight');
}

Comments

[Ольга]

а если при загрузке страницы на кнопке уже висит класс highlight, как при клике на другую кнопку этот класс снять?

[Kovalsky]

Ольга: вероятно стоит инициализировать selectedButton, то есть при загрузке страницы искать есть ли кнопка с таким классом, если есть - сохранять её в selectedButton.

[Ольга]

Никита Полевой: не можете подсказать как это сделать?

[Kovalsky]

Ольга: как найти кнопку с классом highlight?

[Ольга]

как найти и в случае если она есть, сохранить в переменную selectedButton.

[Kovalsky]

Ольга: ну, это можно найти в интернетах, например так можно найти элементы, а сохранить - как-то так.

Answer 2

[Мир]

если выбранная кнопка была нажата то удаляется
далее в выбранную кнопку добавляется нажатая кнопка