Warum funktioniert socket.io nicht gut mit Klickereignissen?

Question

Ich habe einen sehr einfachen HTML-Code, der nur

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

haben Und ich versuche socket.io zu verwenden, um dieses div an allen Fenstern zu färben, wenn sie auf ein beliebiges Fenster geklickt und dann angeklickt, wenn wieder ändert es seine Farbe überall zurück und so weiter.

Aber es funktioniert nur das erste Mal und macht die Farbe überall blau, aber nie wieder weiß, wenn Sie erneut klicken.

Dies ist der Server-Code:

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

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

}); 

Und dies ist der JavaScript-Teil auf der HTML-Seite:

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

Viele Browser Hex-Werte von Farben in dem Stil dieser Attribute Werte rgb. Das Vergleichen von String-Werten von CSS-Regeln im Style-Attribut eines HTML-Elements ist riskant. Stattdessen sollten Sie den Farbwert nur in einer anderen Variablen speichern, anstatt auf das DOM zu verweisen, um diese Informationen zu erhalten.

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); 
}