Смена цвета у div по клику не совсем получается
Смена цвета у div по клику не совсем получается. Хотел чтобы при клике div становился красным и при клике еще раз делался опять синим и тд. не пойму что не так с условием. Подскажите пожалуйста:help:
const classOne = document.querySelector('.one'); classOne.addEventListener('click', () => { if (classOne.style.background = 'blue'){ classOne.style.background = 'red'; }else if (classOne.style.background = 'red'){ classOne.style.background = 'blue'; }else{ classOne.style.background = 'black'; } }); есть конечно же и html <div class="wrapper"> <div class="one"></div> </div> |
oleglzns,
нужен массив цветов и индекс выбранного цвета. classOne.style.background так не проверяют = так не сравнивают Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
как вариант, но очень "сомнительный" подход
<html>
<style type="text/css">
.one{
padding: 20px;
background:red
}
</style>
<body>
<div class="one">
</div>
<script>
const classOne = document.querySelector('.one');
classOne.addEventListener('click', (e) => {
e.target.style.background = (window.getComputedStyle(e.target).backgroundColor=='rgb(255, 0, 0)')?'#0000ff':'#ff0000'
})</script>
</body>
</html>
|
od0201,
а через проверку индекса слабо? или без проверки совсем ))) |
:nono: я же написал, "как вариант, но очень "сомнительный" подход".
несомненно, предложенный тобой подход является верным
<html>
<body>
<div style="padding: 20px; background:yellow;"></div>
<script>
arrColors=['red','yellow','blue','black']
const classOne = document.querySelector('div');
classOne.addEventListener('click', (e) => {
let color=e.target.style.background
newIndex=(arrColors.findIndex(e=>e===color)+1)%arrColors.length
e.target.style.background = arrColors[newIndex]
})
</script>
</body>
</html>
но здесь есть один минус. Первоначальный цвет нужно задавать непосредственно в элементе. Если через класс, то первый раз e.target.style.background выдаст пусто и будет red вместо blue |
od0201,
<html>
<body>
<div style="padding: 20px;border: 1px solid red"></div>
<script>
const arrColors=['red','yellow','blue','black'];
const classOne = document.querySelector('div');
classOne.addEventListener('click', _ => {
let newIndex = classOne.dataset.newIndex = (classOne.dataset.newIndex || 0) % arrColors.length;
classOne.style.backgroundColor = arrColors[newIndex];
classOne.dataset.newIndex++;
})
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 09:59. |