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

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

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

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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, в данном случае можно сказать, что очепятка. Не обращайте внимания.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

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

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