Изменения цвета с языком сценариев JavaScript

Привет я изучаю язык сценариев JavaScript и у меня есть проблема со следующим упражнением внутри меня html я имею мой ID который у них есть красное и синее имя цветов.

и внутри моего JS у меня есть моя следующая линия кода.

const redButton = document.getElementById('redButton');
const blueButton = document.getElementById('blueButton');

redButton.addEventListener('click', (e) => {
  const colorSquare = document.getElementById('colorDiv');
  colorSquare.style.backgroundColor = 'red';
});

blueButton.addEventListener('click', (e) => {
  colorSquare.style.backgroundColor = 'blue';
})

То, что я хочу, что, в момент сеть кликает в кнопке, ID colorDiv измените цвет в красный, и когда кликнут в синей кнопке, измените цвет в синий цвет.

Я думаю, что форма для этого - с условными if и else, но не, как объявление этого для того, чтобы осуществилось это событие.

4
задан 12.01.2017, 16:46
0 ответов

Ты не мог отображать изменения, из-за которых ты div у него не было какого-либо размера.

Код:

const redButton = document.getElementById('redButton');
const blueButton = document.getElementById('blueButton');
const colorSquare = document.getElementById('colorDiv');
redButton.addEventListener('click', (e) => {
    colorSquare.style.backgroundColor = 'red';
});
blueButton.addEventListener('click', (e) => {
    colorSquare.style.backgroundColor = 'blue';
});
#colorDiv{
    width:10px;
    height:10px;
}
<button type="button" id="redButton">Click Me!</button>
<button type="button" id="blueButton">Click Me!</button>
<div id="colorDiv"></div>

Сейчас на твоем сомнении:

Также было бы возможно решить это с условными if и else?

Ощутитесь, что в этом примере он требуется переменной, чтобы мочь выполнять условия if и else.

Чтобы тестировать пример, ты должен изменять стоимость переменной n, и только что ты увидишь изменения цветов.

var n = 30;//cambia el valor y veras cambios en el color del div

if (n >= 60)
{
    document.getElementById("miDiv").style.backgroundColor = 'red';
}
else  
if (n >= 41 && n <50)  
{
    document.getElementById("miDiv").style.backgroundColor = 'black';
}  
else  
if (n <=40)  
{
    document.getElementById("miDiv").style.backgroundColor = 'blue';
}
#miDiv{
    width:100px;
    height:100px;
}
<div id="miDiv">
</div>
6
ответ дан 03.12.2019, 17:44
  • 1
    Большое спасибо из-за твоей помощи, меня sirvió многого, только я хотел бы я это прокомментирую tambié n podrí чтобы решить с условными if и else? –  12.01.2017, 03:07
  • 2
    @PoloMoreno логика для этого типа эффектов отличная от программирования от объектов, так как говорится о событиях пользователя, talves было бы возможно делать, но он не был бы самым подходящим способом. –  12.01.2017, 03:10
  • 3
    @PoloMoreno ожидание я показываю тебя с другим примером, как он был бы с if else, он будет стоить тебе для того, чтобы дифференцировать логику –  12.01.2017, 03:14
  • 4
    @PoloMoreno я оставил тебе другой пример в новом ответе. –  12.01.2017, 03:25

Теги

Похожие вопросы