Невозможно удалить класс добавления из HTML-элемента

Question

У меня есть три цветные кнопки. Когда я выбираю кнопку, я хочу, чтобы она была выбрана, а остальные две были отменены. красный, синий и желтый объекты с свойством isSelected установлено в true или false. Я могу выбрать одну кнопку один раз, для этой кнопки выбрано значение «Выбрать для». Однако я не могу выбрать новую кнопку и снять выделение с текущей.

(я знаю, что могу сделать это с помощью JQuery легко ... но я пытаюсь узнать, как использовать объекты Javascript здесь ...)

Приведенный ниже код не работает, это биты I думаю, имеют отношение к проблеме без HTML и CSS. Приложение находится на CodePen: http://codepen.io/isachenx/pen/LxEOOR

Моя идея - установить isSelected на true или false для каждого из селекторов. Если isSelected is true, я добавляю класс .selected в строку html, если он является ложным, строка не включает класс. Затем я вновь сделать (по крайней мере, это то, что я думаю, что я делаю) строка каждый раз, когда щелкают элемент литий ...

//create constructor 
 
    function Selector(colour){ 
 
     this.colour = colour 
 
     this.isSelected = false 
 
    } 
 

 
    //set method to select and deselect the list items 
 
    Selector.prototype.selectColour = function(){ 
 
     this.isSelected = true 
 
    } 
 

 
    Selector.prototype.deselectColour = function(){ 
 
     this.isSelected = false 
 
    } 
 

 
    //render the string for the list item to HTML 
 
    Selector.prototype.toHTML = function(){ 
 
     let htmlString = "" 
 
     htmlString += '<li id="' + this.colour + '" class="' + this.colour 
 
     if (this.isSelected){ 
 
     htmlString += ' selected' 
 
     } 
 
     htmlString += '"></li>' 
 
     return htmlString 
 
    } 
 
    
 
    //Constructor to render every list item to html 
 
    function Controls(){ 
 
     this.selectors = [] 
 
    } 
 

 
    Controls.prototype.add = function(selector){ 
 
     this.selectors.push(selector) 
 
    } 
 

 
    Controls.prototype.renderInElement = function(list){ 
 
     list.innerHTML = '' 
 
     for (let i=0; i<this.selectors.length; i++){ 
 
     list.innerHTML += this.selectors[i].toHTML() 
 
     } 
 
    } 
 

 
    let controls = new Controls 
 

 
    let red = new Selector('red') 
 
    let blue = new Selector('blue') 
 
    let yellow = new Selector('yellow') 
 

 
    controls.add(red) 
 
    controls.add(blue) 
 
    controls.add(yellow) 
 

 
    let controlElement = document.getElementById('controlButtons') 
 
    controls.renderInElement(controlElement) 
 

 
    let redButton = document.getElementById('red') 
 
    redButton.onclick = function(){ 
 
     red.selectColour() 
 
     blue.deselectColour() 
 
     yellow.deselectColour() 
 
     controls.renderInElement(controlElement) 
 
    } 
 

 
    let blueButton = document.getElementById('blue') 
 
    blueButton.onclick = function(){ 
 
     blue.selectColour() 
 
     red.deselectColour() 
 
     yellow.deselectColour() 
 
     controls.renderInElement(controlElement) 
 
    } 
 

 
    let yellowButton = document.getElementById('yellow') 
 
    yellowButton.onclick = function(){ 
 
     yellow.selectColour() 
 
     red.deselectColour() 
 
     blue.deselectColour() 
 
     controls.renderInElement(controlElement) 
 
    }

Answer 1

По вашему коду второй щелчок на любой из этих кнопок не работает. Причина в том, что onclick установлен только в первый раз.

Функция toHTML очищает существующие кнопки (строка 33: list.innerHTML = ''), в результате чего удаляются их события onclick. Вы должны установить их снова внутри toHTML.

Как так:

Selector.prototype.toHTML = function(){ 

    // set the on click function to the desired color 
    let onclickStr = 'setOnClick(\'' + this.colour + '\')'; 

    let htmlString = "" 
    htmlString += '<li id="' + this.colour + '" class="' + this.colour 
    if (this.isSelected){ 
    htmlString += ' selected' 
    } 

    // Note the following change 
    htmlString += '" onclick="' + onclickStr + '"></li>' 
    return htmlString 
} 

Затем обернуть xxxbutton.onclick функции с:

function setOnClick(color) { 
    let redButton = document.getElementById('red') 
    let blueButton = document.getElementById('blue') 
    let yellowButton = document.getElementById('yellow') 
    if(color==='red'){  
    red.selectColour() 
    blue.deselectColour() 
    yellow.deselectColour() 
    }else if(color==='blue'){ 
    blue.selectColour() 
    red.deselectColour() 
    yellow.deselectColour() 
    }else{ 
    yellow.selectColour() 
    red.deselectColour() 
    blue.deselectColour() 
    } 
    controls.renderInElement(controlElement) 
} 

JSFIDDLE DEMO

Answer 2

Установка isSelected в true или false Безразлично» t измените класс на элемент DOM. Чтобы добавить/удалить класс:

var colourObj = document.querySelector(colour); 
colourObj.classList.add('selected'); 
//or to remove a class 
colourObj.classList.remove('selected');