Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.01.2020, 15:28
Новичок на форуме
Отправить личное сообщение для toytronic Посмотреть профиль Найти все сообщения от toytronic
 
Регистрация: 08.01.2020
Сообщений: 1

Смена цвета элементов после нажатия кнопки
Здравствуйте, уважаемые. Прошу прощения за ламерский вопрос, только начинаю учиться. Задача следующая:

Напишите простой JS-скрипт (без использования jQuery и других фреймворков) который должен осуществить однократное изменение цвета квадратов с синего на красный при нажатии на кнопку Change color. Html менять можно.

<!DOCTYPE html>
<html>
<body>

<h1>Change the color of squares</h1>

<button type="button" style="display: block;">Change color</button>

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

</body>
</html>


CSS:
Код:
.square {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
  display: inline-block;
}
Ответить с цитированием
  #2 (permalink)  
Старый 08.01.2020, 15:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

toytronic,
а самому написать цикл по всем элементам с нужным классом?
начните!
Ответить с цитированием
  #3 (permalink)  
Старый 08.01.2020, 15:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

toytronic,
цикл
Цикл «for»
элементы для цикла
querySelectorAll (тут практически готовый код, заменить алерт на смену класса)
что менять
classList.toggle
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена цвета div по нажатию Tempest Общие вопросы Javascript 5 23.05.2018 18:51
единожды выполнить callback после .hide() нескольких элементов. winch jQuery 19 06.04.2018 05:24
Появление кнопки после нажатия eljakovarkadiy Элементы интерфейса 2 31.10.2017 09:16
Значения элементов формы типа Input по нажатию кнопки сохранить в JSON drno-reg Элементы интерфейса 1 22.07.2016 15:15
Сохранение результата ajax запроса после нажатия 'back' gregOlsen AJAX и COMET 5 18.11.2009 12:23