Есть кнопка и объект. Как по клику на кнопку закрасить объект?

@reseeman · Регистрация: 15.01.2018

Author24 — интернет-сервис помощи студентам

Есть кнопка (допустим красная). По клику на кнопку нужно чтобы закрасился объект этим же цветом. (Кнопка сделана через div)
Вот код html:

HTML5

<!DOCTYPE html>
<html>
<head>
    <title>Game</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
</head>
 
<body>
    <script>
    </script>
 
    <div class="button1"></div>
  <div class="button2"></div>
  <div class="button3"></div>
 
</body>
</html>

CSS

CSS

body {
}
 
.button1 {
  display: inline-block;
  position: relative;
  top: 500px;
  left: 100px;
  margin: 5px;
  width: 20px;
  height: 20px;
  background: red;
  cursor: pointer;
  border-radius: 50%;
}
.button2 {
  display: inline-block;
  position: relative;
  top: 500px;
  left: 100px;
  margin: 5px;
  width: 20px;
  height: 20px;
  background: green;
  cursor: pointer;
  border-radius: 50%;
}
.button3 {
  display: inline-block;
  position: relative;
  top: 500px;
  left: 100px;
  margin: 5px;
  width: 20px;
  height: 20px;
  background: blue;
  cursor: pointer;
  border-radius: 50%;
}

@j2FunOnly · 26.04.2018, 09:56

Сообщение от reseeman

нужно чтобы закрасился объект

Где объект?

PHP/HTML

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    var changeColor = function changeColor() {
      var el = document.querySelector('#target'),
        color = window.getComputedStyle(this).getPropertyValue('background-color');
 
      el.style.backgroundColor = color;
    }
 
    var btns = document.querySelectorAll('[class^="button"]');
    for (var btn of btns) {
      btn.addEventListener('click', changeColor)
    }
  });
 
</script>
<div id="target">
  Я есть Объект для закраски
</div>
<div class="button1"></div>
<div class="button2"></div>
<div class="button3"></div>

@AlexZaw · 26.04.2018, 10:21

j2FunOnly, А зачем в переменную присваивать функцию с именем? Это просто опечатка или какой то хитрый способ?

@j2FunOnly · 26.04.2018, 11:01

Не по теме:

AlexZaw, в данном случае можно сказать, что очепятка. Не обращайте внимания.

@AlexZaw Модератор 2277 / 1657 / 651 Регистрация: 07.08.2016 Сообщений: 3,972
	26.04.2018, 10:21	3
	j2FunOnly, А зачем в переменную присваивать функцию с именем? Это просто опечатка или какой то хитрый способ? 0

@j2FunOnly
	26.04.2018, 11:01 Есть кнопка и объект. Как по клику на кнопку закрасить объект? #4
	Не по теме: AlexZaw, в данном случае можно сказать, что очепятка. Не обращайте внимания. 0