Как сделать или зациклить оператор if, чтобы изменить цвет с зеленого на оранжевый и обратно?

Можете ли вы помочь мне с моим кодом ниже? Не могу понять, как перебрать все элементы в массиве, чтобы изменить цвет фона с зеленого на оранжевый и обратно при нажатии. Я хочу, чтобы он изменил цвет фона каждого конкретного div на оранжевый при нажатии и снова на зеленый... и так далее. Что я делаю неправильно?

//HTML

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Working With JavaScript Functions</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id='testA' style="background-color: green;" class="box"></div>
    <div id='testB' style="background-color: green;"  class="box"></div>
    <div id='testC' style="background-color: green;"  class="box"></div>
    <div id='testD' style="background-color: green;"  class="box"></div>
    <div id='testE' style="background-color: green;"  class="box"></div>
    <div id='testF' style="background-color: green;"  class="box"></div>
    <script src="index.js"></script>
  </body>
</html>

//CSS

.box {
    width: 75px;
    height: 75px;
    margin: 1rem;
    display: inline-block;
}

//javascript

let greenBox = document.getElementsByClassName('box');

function boxClicked(event) {
    
  for (let i = 0; i <=greenBox.length; i++){

    if (greenBox[i].style.backgroundColor === 'green') {
      greenBox[i].style.backgroundColor = 'orange';

    } else {
      greenBox[i].style.backgroundColor = 'green';
    }
  }
}

greenBox.addEventListener('click', boxClicked);

Взгляните на то, что возвращает getElementsByClassName()greenBox будет коллекцией, которую вам нужно будет перебрать, чтобы добавить прослушиватели событий.

mykaf 18.11.2022 21:43

Как мне это сделать? Что не так с моим кодом js выше?

Darko Zlatarek 18.11.2022 21:59
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
0
2
111
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Я думаю, что проблема заключается в последней строке сценария js, когда вы вызываете assEventListener на greenBox, который является массивом.

Вместо этого вы можете добавить свойство onClick к каждому div так:

<div id='testA' style="background-color: green;" class="box" onClick="boxClicked()"></div>
<div id='testB' style="background-color: green;"  class="box" onClick="boxClicked()"></div>
<div id='testC' style="background-color: green;"  class="box" onClick="boxClicked()"></div>
<div id='testD' style="background-color: green;"  class="box" onClick="boxClicked()"></div>
<div id='testE' style="background-color: green;"  class="box" onClick="boxClicked()"></div>
<div id='testF' style="background-color: green;"  class="box" onClick="boxClicked()"></div>

Я изменил ваш код. Вам нужно иметь прослушиватель событий внутри цикла для выполнения для каждого элемента HTML. В вашем коде это набор элементов HTML, который не имеет свойства прослушивания событий.

let greenBox = document.getElementsByClassName('box');

for (const g of greenBox) {
   g.addEventListener('click', boxClicked);
}

function boxClicked(event) {
     event.target.style.backgroundColor = event.target.style.backgroundColor === 'green' ? 'orange' : 'green';
}

Привет Бхавья, Спасибо за ответ. Ваш код работал каким-то образом. Мне нужно было, чтобы коробки становились оранжевыми на индивидуальной основе. У тебя они все сразу стали оранжевыми. Наверное не так объяснил. Спасибо за ответ в любом случае!

Darko Zlatarek 18.11.2022 23:16

Тогда я отредактирую свой ответ. Взглянуть

Bhavya Dhiman 18.11.2022 23:17

Теперь это работает. Не могли бы вы объяснить мне, зачем нужен «event.target.style.backgroundColor =»?

Darko Zlatarek 18.11.2022 23:22

Это событие ссылается на событие для текущего элемента, к которому подключен прослушиватель событий. event.target ссылается на текущий элемент, для которого выполняется действие. event.target.backgroundColor необходим, чтобы мы могли изменить цвет только на текущем элементе, по которому щелкнули.

Bhavya Dhiman 18.11.2022 23:25
Ответ принят как подходящий

Я полагаю, что ваша проблема заключается в том, что вы пытаетесь добавить прослушиватель событий в интерфейс HTMLCollection, что недопустимо.

Если вы хотите разрешить изменение цвета фона каждого .box div по щелчку по отдельности, вы можете настроить цикл загрузки страницы, чтобы добавить прослушиватель событий к каждому .box div, а затем использовать свойство srcElement элемента event объект для изменения цвета фона.

Кроме того, небольшое предложение, не связанное с вопросом, рассмотрите возможность переименования greenBox во что-то более точное, например boxes, поскольку переменная содержит набор элементов, и они не всегда будут зелеными. Это реализовано в решении ниже:

const boxes = document.getElementsByClassName('box');

for (let box of boxes) {
  box.addEventListener('click', boxClicked);
}

function boxClicked(event) {
  event.srcElement.style.backgroundColor =
    event.srcElement.style.backgroundColor === 'green' ? 'orange' : 'green';
}

Надеюсь это поможет.

Привет, Деймон, спасибо. Ваш код, кажется, работает. могу я спросить вас, какова цель «event.srcElement.style.backgroundColor =» быть пустым?

Darko Zlatarek 18.11.2022 22:56

Не беспокойтесь, и это просто то, как мой форматировщик в коде vs имел дело с длинной одиночной строкой. Следующая строка продолжает это утверждение до ;. Итак, полное заявление event.srcElement.style.backgroundColor = event.srcElement.style.backgroundColor === 'green' ? 'orange' : 'green';

damonholden 18.11.2022 22:59

О.. хорошо. Спасибо за быстрый ответ. Тогда мой вопрос: зачем нужен первый бит (event.srcElement.style.backgroundColor =)?

Darko Zlatarek 18.11.2022 23:09

Первый — это присваивание (=) свойства backgroundColor, а второй использует оператор строгого равенства (===), чтобы проверить, какой цвет фона уже есть, и возвращает правильную строку цвета (с помощью тернарного оператора) в присваивание.

damonholden 18.11.2022 23:56

Блестящее объяснение Деймон. Имеет смысл! Большое спасибо!

Darko Zlatarek 19.11.2022 00:13

Другие вопросы по теме