Вопросы Теги

Проблема, изменив getElements идентификацию из-за ClassName

Я пытаюсь сделать так, чтобы пользователи смогли менять главный цвет (.primary-color) моей страницы, выбирая между установленными заранее цветами.

Я нашел этот малыш snippet

function change(i) {

  var color = document.getElementById("color");

  color.style.backgroundColor = i;

}
.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 id="color"></div>

Появляются 4 цвета, которые нужно выбирать, чтобы применяться к пятому DIV. Функционируй хорошо.

Но если я хочу изменить пятого DIV, а именно переходить из идентификации в класс, оно я не функционирует:

function change(i) {

  var color = document.getElementsByClassName("color");

  color.style.backgroundColor = i;

}
.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>

Здесь в сайте есть сходная тема, но он у меня не остался совсем ясным: Каково различие между выбиранием из-за идентификации или ClassName?

Я не знаю много JS, смоги быть ошибкой tipeo? Большое спасибо заранее

7
задан 27.02.2019, 17:26
0 ответов