Форум

oleglzns · #1 (**permalink**) 20.06.2021, 00:21

Смена цвета у div по клику не совсем получается. Хотел чтобы при клике div становился красным и при клике еще раз делался опять синим и тд. не пойму что не так с условием. Подскажите пожалуйста

рони · #2 (**permalink**) 20.06.2021, 07:34

oleglzns,
нужен массив цветов и индекс выбранного цвета.
classOne.style.background так не проверяют
= так не сравнивают

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

od0201 · #3 (**permalink**) 21.06.2021, 14:15

как вариант, но очень "сомнительный" подход

<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>

рони · #4 (**permalink**) 21.06.2021, 15:07

od0201,
а через проверку индекса слабо? или без проверки совсем )))

od0201 · #5 (**permalink**) 27.06.2021, 13:10

я же написал, "как вариант, но очень "сомнительный" подход".

несомненно, предложенный тобой подход является верным

<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

рони · #6 (**permalink**) 27.06.2021, 15:02

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>

Форум

Справочник

Discord чат

Курсы javascript