Смена цвета у 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, время: 01:34. |