Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.06.2021, 00:21
Новичок на форуме
Отправить личное сообщение для oleglzns Посмотреть профиль Найти все сообщения от oleglzns
 
Регистрация: 20.06.2021
Сообщений: 1

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

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>
Ответить с цитированием
  #2 (permalink)  
Старый 20.06.2021, 07:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,799

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

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

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 21.06.2021, 14:15
Аспирант
Отправить личное сообщение для od0201 Посмотреть профиль Найти все сообщения от od0201
 
Регистрация: 07.05.2020
Сообщений: 42

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

<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, 21.06.2021 в 14:24.
Ответить с цитированием
  #4 (permalink)  
Старый 21.06.2021, 15:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,799

od0201,
а через проверку индекса слабо? или без проверки совсем )))
Ответить с цитированием
  #5 (permalink)  
Старый 27.06.2021, 13:10
Аспирант
Отправить личное сообщение для od0201 Посмотреть профиль Найти все сообщения от od0201
 
Регистрация: 07.05.2020
Сообщений: 42

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

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

<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, 27.06.2021 в 14:06.
Ответить с цитированием
  #6 (permalink)  
Старый 27.06.2021, 15:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,799

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не совсем обычная смена картинок (по расписанию) barcaman Общие вопросы Javascript 1 04.03.2013 13:40
Смена цвета текста по кругу! JS_Den Общие вопросы Javascript 4 18.02.2012 12:39
Не получается поменять высоту div revvo jQuery 4 06.08.2011 12:12
Не получается по щелчку на ссылке вывести div по центру экрана! Триви jQuery 6 11.03.2011 09:35
Не получается загрузить баннер в раздел DIV методами Javascript через iframe ((( autobuh Общие вопросы Javascript 3 24.07.2009 18:24