Entonces, si coloco el mouse sobre el botón "CAMBIAR", el color naranja funciona normalmente.
Si hago clic en el botón "CAMBIAR" una vez, el color se vuelve rojo pero el color flotante desaparece (está bien).
Si lo presiono 2 veces, vuelve al primer color (azul), pero el color de desplazamiento no funciona.
¿Cómo puede desaparecer el color flotante en el primer clic (como lo hace ahora) y reaparecer en el segundo clic, como al principio? ¡¡¡Muchas gracias!!!
var someFunction = {}; function changeColor() { var button = document.getElementById('mute1').style.backgroundColor; var color = ''; this.active = !this.active; someFunction["one"] = this.active; someFunction["two"] = this.active; if (button !== 'red') { color = 'red'; document.getElementById('mute1').style.backgroundColor = color; document.getElementById('mute1').style.color = "#fff"; } else if (button === 'red') { color = '#2c475c'; document.getElementById('mute1').style.backgroundColor = color; document.getElementById('mute1').style.color = "#fff"; this.active = !this.active; someFunction[this.function] = this.active; } } #mute1 { padding: 25px 50px; background: #2c475c; color: #fff; border-radius:5px; } #mute1:hover { background: orange; } <button id="mute1" onclick="changeColor();">CHANGE</button >El problema es que el desplazamiento solo cambia de color a través de una clase, mientras que el clic cambia el estilo en línea y eso tiene prioridad. Si mira con las herramientas de desarrollo de su navegador, verá que el elemento tiene un estilo de fondo en línea establecido una vez que haya hecho el primer clic.
Si desea detener eso y tener siempre un mouse flotante para que el color de fondo sea naranja, tiene un par de alternativas:
apéguese a cambiar el estilo en línea al hacer clic, pero también agregue un detector de eventos para el mouseover en JS que cambia el fondo en línea a naranja o
clases de uso para todo.
Este fragmento elimina la clase flotante y, en su lugar, escucha los eventos mouseenter y mouseout, así como el clic en el botón.
Hace que la variable de color sea global para que también se pueda usar en el código de evento mouseout para restaurar el color (el rojo o el gris) que estaba allí antes.
El código aquí es bastante básico, solo dentro del botón, probablemente querrá convertirlo en funciones JS 'adecuadas' y también agregar EventListeners en lugar de usar los atributos en línea onclick, etc.
let color = '#2c475c'; var someFunction = {}; function hovered() {} function changeColor() { var button = document.getElementById('mute1').style.backgroundColor; /*var */ color = ''; this.active = !this.active; someFunction["one"] = this.active; someFunction["two"] = this.active; if (button !== 'red') { color = 'red'; document.getElementById('mute1').style.backgroundColor = color; document.getElementById('mute1').style.color = "#fff"; } else if (button === 'red') { color = '#2c475c'; document.getElementById('mute1').style.backgroundColor = color; document.getElementById('mute1').style.color = "#fff"; this.active = !this.active; someFunction[this.function] = this.active; } } #mute1 { padding: 25px 50px; background: #2c475c; color: #fff; border-radius: 5px; } <button id="mute1" onclick="changeColor();" onmouseenter="this.style.backgroundColor = 'orange';" onmouseout="this.style.backgroundColor = color;">CHANGE</button >Eliminar el punto y coma en onclick :
<button id="mute1" onclick="changeColor()">CHANGE</button >