なぜsocket.ioはクリックイベントでうまく動作しないのですか？

Question

私はちょうど

<div id="colorMe"> Change Me </div> 

を持っていると私は、任意のウィンドウ上でクリックしたときに、これはすべてのウィンドウ上のdiv着色するsocket.ioを使用しようとしているし、もう一度クリックしたときに、それはその色を変更する非常に単純なHTMLコードを持っていますどこにでも戻ることができます。

しかし、これは初めてのみ動作し、どこでも色が青色になりますが、再度クリックすると白く戻ることはありません。

これは、サーバーのコードです：

io.on('connection', function(socket){ 

    socket.on('changeColor', function(data){ 
    io.emit('currentColor',data); 
    }); 

}); 

そして、これは、htmlページではjavascriptの一部です：

var socket = io(); 

let div = document.querySelector('#colorMe'); 

socket.on('currentColor',(currentColor)=>{ 
    div.style.background = currentColor; 
}); 


function changeColor(){ 
    let color = (div.style.background == 'blue')? 'white' : 'blue'; 
    socket.emit('changeColor', color); 
} 

div.addEventListener('click', changeColor); 

Answer 1

多くのブラウザがスタイルに色の六角形の値を設定するには、値をRGBに属性。 html要素のstyle属性のCSSルールの文字列値を比較するのは危険です。代わりに、その情報を取得するためにDOMを参照するのではなく、別の変数に色の値を格納するだけです。

let div = document.querySelector('#colorMe'); 
let myColor = ""; 

socket.on('currentColor',(currentColor)=>{ 
    myColor = currentColor; 
    div.style.background = currentColor; 
}); 


function changeColor(){ 
    let color = (myColor == '#336699') ? '#ffffff' : '#336699'; 
    socket.emit('changeColor', color); 
}