Skip to main content

Cuando coges con el nombre de la clase, te coge un array mpor lo que tienes que recorrer los elemntos para poder cambiar el estilo de estos.

function change(icolorName) {

  var elements = document.getElementsByClassName("color");
  for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor="blue";backgroundColor=colorName;
    }
 

}
.div-1 {
  background-color: orange;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-2 {
  background-color: black;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-3 {
  background-color: green;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-4 {
  background-color: red;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.color {
  background-color: transparent;
  border: 2px solid #000;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px;
}
<div class="div-1" onclick="change('orange')"></div>
<div class="div-2" onclick="change('black')"></div>
<div class="div-3" onclick="change('green')"></div>
<div class="div-4" onclick="change('red')"></div>

<div class="color"></div>

Cuando coges con el nombre de la clase, te coge un array mpor lo que tienes que recorrer los elemntos para poder cambiar el estilo de estos.

function change(i) {

  var elements = document.getElementsByClassName("color");
  for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor="blue";
    }
 

}
.div-1 {
  background-color: orange;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-2 {
  background-color: black;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-3 {
  background-color: green;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-4 {
  background-color: red;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.color {
  background-color: transparent;
  border: 2px solid #000;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px;
}
<div class="div-1" onclick="change('orange')"></div>
<div class="div-2" onclick="change('black')"></div>
<div class="div-3" onclick="change('green')"></div>
<div class="div-4" onclick="change('red')"></div>

<div class="color"></div>

Cuando coges con el nombre de la clase, te coge un array mpor lo que tienes que recorrer los elemntos para poder cambiar el estilo de estos.

function change(colorName) {

  var elements = document.getElementsByClassName("color");
  for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor=colorName;
    }
 

}
.div-1 {
  background-color: orange;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-2 {
  background-color: black;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-3 {
  background-color: green;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-4 {
  background-color: red;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.color {
  background-color: transparent;
  border: 2px solid #000;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px;
}
<div class="div-1" onclick="change('orange')"></div>
<div class="div-2" onclick="change('black')"></div>
<div class="div-3" onclick="change('green')"></div>
<div class="div-4" onclick="change('red')"></div>

<div class="color"></div>

Origen Enlace

Cuando coges con el nombre de la clase, te coge un array mpor lo que tienes que recorrer los elemntos para poder cambiar el estilo de estos.

function change(i) {

  var elements = document.getElementsByClassName("color");
  for (var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor="blue";
    }
 

}
.div-1 {
  background-color: orange;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-2 {
  background-color: black;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-3 {
  background-color: green;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.div-4 {
  background-color: red;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px
}

.color {
  background-color: transparent;
  border: 2px solid #000;
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px;
}
<div class="div-1" onclick="change('orange')"></div>
<div class="div-2" onclick="change('black')"></div>
<div class="div-3" onclick="change('green')"></div>
<div class="div-4" onclick="change('red')"></div>

<div class="color"></div>