HTML要素から追加クラスを削除できません。

Question

3つの色のボタンがあります。私がボタンを選択すると、そのボタンが選択され、他の2つは選択解除されます。赤、青、黄はisSelectedプロパティがtrueまたはfalseに設定されたオブジェクトです。私は1つのボタンを1回選択することができ、そのボタンのisSelectedをtrueに設定します。しかし、私は新しいボタンを選択して現在のボタンの選択を解除することはできません。

コードの下に実行されません（...私は簡単にjQueryを使ってこれを行うことができます知っている...しかし、私はJavascriptがここにオブジェクトを使用する方法を学習しようとしている）、それはビットですI HTMLとCSSなしで問題に関連していると思います。アプリはCodePenにあります：http://codepen.io/isachenx/pen/LxEOOR

私のアイデアは、セレクタごとにisSelectedをtrueまたはfalseに設定することです。 isSelectedがtrueの場合、クラス.selectedをhtml文字列に追加します。falseの場合、文字列にはクラスは含まれません。 Iその後、再レンダリング（少なくとも、それは私が私がやっていると思うものだ）文字列li要素がクリックされるたびに...

trueまたはdoesnの falseに isSelectedを設定

//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

」 DOM要素のクラスを変更しないでください。クラスを追加/削除するには：

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