0

Estoy practicando y quiero mejorar el código, ya que es largo y me gustaría que quedara mejor.

Tengo un grid con seis (06) botones, cada uno de un color. Al hacer clic en el botón "negro" todo el fondo del DIV que ocupa todo el ancho de la página cambia a negro. Hasta ahí todo bien.

La cosa es que tengo mucho código JS, uno para cada botón, y me gustaría simplificarlo (cada botón tiene una clase con el color al que cambia).

function cabezaNegro(colorCabeza) {
  var cabeza = document.getElementById("cabeza");
  cabeza.style.backgroundColor = "black";
}

function cabezaBlanco(colorCabeza) {
  var cabeza = document.getElementById("cabeza");
  cabeza.style.backgroundColor = "white";
}

function cabezaBeige(colorCabeza) {
  var cabeza = document.getElementById("cabeza");
  cabeza.style.backgroundColor = "beige";
}

function cabezaAzul(colorCabeza) {
  var cabeza = document.getElementById("cabeza");
  cabeza.style.backgroundColor = "darkblue";
}

function cabezaVerde(colorCabeza) {
  var cabeza = document.getElementById("cabeza");
  cabeza.style.backgroundColor = "darkolivegreen";
}

function cabezaMarron(colorCabeza) {
  var cabeza = document.getElementById("cabeza");
  cabeza.style.backgroundColor = "class";
}
<div class="cabeza" id="cabeza">
  <div class="wrapper">
    <button onclick="cabezaNegro(this)" class="black"></button>
    <button onclick="cabezaBlanco(this)" class="white"></button>
    <button onclick="cabezaBeige(this)" class="beige"></button>
    <button onclick="cabezaAzul(this)" class="darkblue"></button>
    <button onclick="cabezaVerde(this)" class="darkolivegreen"></button>
    <button onclick="cabezaMarron(this)" class="brown"></button>
  </div>
</div>

3 respuestas 3

0

Puedes hacerlo dinamico de esta forma:

function changeColor(color) {
    var color = color.className;
    var cabeza = document.getElementById('cabeza'); 
    cabeza.style.backgroundColor = color;
}
<div class="cabeza" id="cabeza">  
  <br><br><br><br>
        <div class="wrapper">
            <button onclick="changeColor(this)" class="black">Black</button>
            <button onclick="changeColor(this)" class="white">White</button>
            <button onclick="changeColor(this)" class="beige">Beige</button>
            <button onclick="changeColor(this)" class="darkblue">Dark Blue</button>
            <button onclick="changeColor(this)" class="darkolivegreen">darkolivegreen</button>
            <button onclick="changeColor(this)" class="brown">brown</button>            
          </div>        
    </div>

1
  • 1
    Gracias!!! Poco a poco aprendiendo! Gracias de nuevo de verdad! Commented el 13 ene. 2021 a las 20:58
0

Si entendí bien tu pregunta, una idea podría ser usar una sola función y pasarle el color como parámetro, por ejemplo:

function cambiarColor(colorCabeza) {
    var cabeza = document.getElementById("cabeza"); 
    cabeza.style.backgroundColor = colorCabeza;
}

Y en cada botón colocar el color como parámetro:

<button onclick="cambiarColor('black')" class="black"></button>
<button onclick="cambiarColor('white')" class="white"></button>

etc...

Hay varias otras formas en que se puede hacer, pero como tu idea es simplificar el código que ya tienes, esa podría ser una salida.

3
  • Lo pruebo mañana en cuanto pueda! no había caido! estaba intentando "coger como color" la clase que está ya nombrada con el mismo Commented el 13 ene. 2021 a las 20:57
  • Claro, en ese caso puedes tomar el className como indica Gerardo en la otra respuesta
    – RVera
    Commented el 13 ene. 2021 a las 21:57
  • Funciona a la perfección! Muchas gracias de verdad! :D Commented el 14 ene. 2021 a las 19:53
0

aplica esta función y en onclick dejas el nombre de la función cambiarColor

  function cambiarColor(colorCabeza) {
    var cabeza = document.getElementById("cabeza"); 
    cabeza.style.backgroundColor = colorCabeza.style.backgroundColor;
}
<div class="cabeza" id="cabeza">              
        <div class="wrapper">
            <button onclick="cambiarColor(this)" class="black"></button>
            <button onclick="cambiarColor(this)" class="white"></button>
            <button onclick="cambiarColor(this)" class="beige"></button>
            <button onclick="cambiarColor(this)" class="darkblue"></button>
            <button onclick="cambiarColor(this)" class="darkolivegreen"></button>
            <button onclick="cambiarColor(this)" class="brown"></button>            
          </div>        
    </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.