Как сделать или зациклить оператор 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);
Как мне это сделать? Что не так с моим кодом js выше?
Ответы 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';
}
Привет Бхавья, Спасибо за ответ. Ваш код работал каким-то образом. Мне нужно было, чтобы коробки становились оранжевыми на индивидуальной основе. У тебя они все сразу стали оранжевыми. Наверное не так объяснил. Спасибо за ответ в любом случае!
Тогда я отредактирую свой ответ. Взглянуть
Теперь это работает. Не могли бы вы объяснить мне, зачем нужен «event.target.style.backgroundColor =»?
Это событие ссылается на событие для текущего элемента, к которому подключен прослушиватель событий. event.target ссылается на текущий элемент, для которого выполняется действие. event.target.backgroundColor необходим, чтобы мы могли изменить цвет только на текущем элементе, по которому щелкнули.
Я полагаю, что ваша проблема заключается в том, что вы пытаетесь добавить прослушиватель событий в интерфейс 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 =» быть пустым?
Не беспокойтесь, и это просто то, как мой форматировщик в коде vs имел дело с длинной одиночной строкой. Следующая строка продолжает это утверждение до ;. Итак, полное заявление event.srcElement.style.backgroundColor = event.srcElement.style.backgroundColor === 'green' ? 'orange' : 'green';
О.. хорошо. Спасибо за быстрый ответ. Тогда мой вопрос: зачем нужен первый бит (event.srcElement.style.backgroundColor =)?
Первый — это присваивание (=) свойства backgroundColor, а второй использует оператор строгого равенства (===), чтобы проверить, какой цвет фона уже есть, и возвращает правильную строку цвета (с помощью тернарного оператора) в присваивание.
Блестящее объяснение Деймон. Имеет смысл! Большое спасибо!
Взгляните на то, что возвращает
getElementsByClassName()—greenBoxбудет коллекцией, которую вам нужно будет перебрать, чтобы добавить прослушиватели событий.