Tengo tres botones Me gustaría que cambien de color cuando se presionen, y que vuelvan a no tener color cuando se presionen nuevamente.

Encontré este código en stackoverflow que me permite casi hacerlo, sin embargo, solo funciona en un botón, los otros dos no se ven afectados.
Además, cuando presioné uno de los otros dos botones, el primer botón cambia de color . Intenté cambiar las ID en los botones, agregando otra secuencia de comandos con diferentes getElementById() ID, pero nada funciona.

¿Necesito más de una función para lograr lo que quiero?

El código que estoy usando está debajo.

var count = 1;
function setColor(btn, color) {
  var property = document.getElementById(btn);
  if (count == 0) {
    property.style.backgroundColor = "#FFFFFF";
    count = 1;
  } else {
    property.style.backgroundColor = "#E68352";
    count = 0;
  }
}
<head>
  <link rel="stylesheet" type="text/css" href="styles/main.css"/>
</head>
<body>
  <input type="button" id="button" value = "A-D" style= "color:black" onclick="setColor('button', '#101010')";/>
  <input type="button" id="button" value = "E-H" style= "color:black" onclick="setColor('button', '#101010')";/>
  <input type="button" id="button" value = "E-H" style= "color:black" onclick="setColor('button', '#101010')";/>
</body>
2
Roberto 16 feb. 2017 a las 17:42

8 respuestas

La mejor respuesta

Por lo general, cuando escribe un controlador de eventos en línea, puede aprovechar:

  • esto: elemento actual: Cuando el código se llama desde un controlador de eventos en línea, se establece en el elemento DOM en el que se coloca el oyente:
  • event: evento elemento objeto

Por lo tanto, cambie:

onclick="setColor('button', '#101010')"

Con:

onclick="setColor(this, event, '#101010')"

Entonces su código puede reescribirse como:

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? 'rgb(' +
        parseInt(result[1], 16) + ', ' +
        parseInt(result[2], 16) + ', ' +
        parseInt(result[3], 16) + ')'
     : null;
}


function setColor(btnEle, evt, color) {
    if (btnEle.style.backgroundColor == hexToRgb("#E68352")) {
        btnEle.style.backgroundColor = "#FFFFFF"
    }
    else {
        btnEle.style.backgroundColor = "#E68352"
    }
}
<input type="button" id="button1" value = "A-D" style= "color:black" onclick="setColor(this, event, '#101010')";/>
<input type="button" id="button2" value = "E-H" style= "color:black" onclick="setColor(this, event, '#101010')";/>
<input type="button" id="button3" value = "E-H" style= "color:black" onclick="setColor(this, event, '#101010')";/>
1
gaetanoM 16 feb. 2017 a las 15:09

Solo necesitas un poco de modificación. Ver el código de trabajo.

function setColor(btn, color) {
  var elem = document.getElementById(btn);

  if (elem.hasAttribute("style")) {
    if (elem.getAttribute("style").indexOf("background-color:") == -1) {
          elem.style.backgroundColor = color;
    } else {
          elem.style.backgroundColor = "";
    }
  }
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>

<body>

  <input type="button" id="button1" value="A-D" style="color:black" onclick="setColor('button1', '#E68352')" ;/>
  <input type="button" id="button2" value="E-H" style="color:black" onclick="setColor('button2', '#E68352')" ;/>
  <input type="button" id="button3" value="E-H" style="color:black" onclick="setColor('button3', '#E68352')" ;/>

</body>

</html>
0
WitVault 16 feb. 2017 a las 16:11

Roberto, como Ibrahim señaló correctamente, el problema es que estás usando la misma ID para todos los botones. Cuando javascript ejecuta este código:

var property = document.getElementById(btw);

Siempre devolverá el primer elemento con la ID especificada. Una solución es elegir una ID diferente para cada botón y actualizar el código onclick correspondiente. Otra solución podría ser la siguiente, en la que no necesita especificar ID en absoluto y la función setColor podría usarse para cualquier elemento.

<!DOCTYPE html>
<html>
<head>
<script>
var count = 1;
function setColor(element, color) {
    if (count == 0) {
        el.style.backgroundColor = "#FFFFFF"
        count = 1;
    }
    else {
        el.style.backgroundColor = "#E68352"
        count = 0;
    }
}
</script>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
</head>

<body>
    <input type="button" value = "A-D" style= "color:black" onclick="setColor(this, '#101010')";/>
    <input type="button" value = "E-H" style= "color:black" onclick="setColor(this, '#101010')";/>
    <input type="button" value = "E-H" style= "color:black" onclick="setColor(this, '#101010')";/>
</body>
</html>

Tenga en cuenta el uso de la variable this como primer argumento para setColor. En cada uno de los botones, el this correspondiente apuntará al elemento donde está definido.

Espero que ayude.

0
Daniel 16 feb. 2017 a las 15:04

No use números, use esto en su lugar http://codepen.io/animhotep/pen/qRwjeX?editors=0010

var count = 1;

function setColor(btn, color) {
  if (count == 0) {
    btn.style.backgroundColor = "#FFFFFF"
    count = 1;
  }
  else {
    btn.style.backgroundColor = "#E68352"
    count = 0;
  }
}
0
Pasha K 16 feb. 2017 a las 14:56

Las identificaciones deben ser únicas, pero no las necesita aquí

Dar una clase a los botones y usar alternar la lista de clases

window.onload=function() {
  var buts = document.querySelectorAll(".but");
  for (var i=0;i<buts.length;i++) {
    buts[i].onclick=function() {
      this.classList.toggle("clicked");
    }
  }
}
.but {background-color:black}
.clicked { background-color:#E68352; }
<input type="button" value="A-D" class="but" />
<input type="button" value="E-F" class="but" />
<input type="button" value="G-H" class="but" />
0
mplungjan 16 feb. 2017 a las 14:53

Las identificaciones deben ser únicas dentro del documento. Me gusta esto:

<input type="button" id="button1" value="A-D" style="color:black" onclick="setColor('button1', '#101010')" ;/>
<--                       here ^                                                      here ^               -->
<input type="button" id="button2" value="E-H" style="color:black" onclick="setColor('button2', '#101010')" ;/>
<--                       here ^                                                      here ^               -->
<input type="button" id="button3" value="E-H" style="color:black" onclick="setColor('button3', '#101010')" ;/>
<--                       here ^                                                      here ^               -->
<!DOCTYPE html>
<html>

<head>
  <script>
    var count = 1;

    function setColor(btn, color) {
      var property = document.getElementById(btn);
      if (count == 0) {
        property.style.backgroundColor = "#FFFFFF"
        count = 1;
      } else {
        property.style.backgroundColor = "#E68352"
        count = 0;
      }
    }
  </script>

  <link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>

<body>

  <input type="button" id="button1" value="A-D" style="color:black" onclick="setColor('button1', '#101010')" ;/>
  <input type="button" id="button2" value="E-H" style="color:black" onclick="setColor('button2', '#101010')" ;/>
  <input type="button" id="button3" value="E-H" style="color:black" onclick="setColor('button3', '#101010')" ;/>

</body>

</html>
0
ibrahim mahrir 16 feb. 2017 a las 14:46

Establezca una clase en los botones, y luego recorra los botones y agregue un detector de eventos a cada uno de ellos:

EDITAR : veo que está utilizando un controlador onclick, que no noté al principio; entonces esta respuesta podría no ser tan útil como pensaba. Sin embargo, definitivamente debe usar diferentes ID si usa ese enfoque.

<button class="button" ... >

var buttons = document.getElementsByClassName('button')
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function() {
        // Do your button things.
    })
}   
0
thesublimeobject 16 feb. 2017 a las 14:45

Deberías tener exclusivos ID

Puede usar classList.toggle("yourClass") en lugar de usar un count

var buttons = document.getElementsByClassName("button");
for (let i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    buttons[i].classList.toggle('active');
  })
}
.active {
  background-color: #E68352 !important;
}

.button {
  background-color: #FFFFFF;
}
<input type="button" id="button1" class="button" value="A-D" />
<input type="button" id="button2" class="button" value="E-H" />
<input type="button" id="button3" class="button" value="E-H" />
1
Weedoze 16 feb. 2017 a las 14:51