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>