bogdan19930903
@bogdan19930903
учусь JS

Как сделать так, чтобы по нажатию на блок менялись background?

var heart_m = document.getElementById('heart_m'+mom);
     
            heart_m.onclick  = function(){
            
            this.style.backgroundImage = 'url(images/heart_ml.png)'; 
                    
            }


при одном нажатии на блок картинка меняется, а мне нужно чтобы при повторном нажатии выполнялось

this.style.backgroundImage = 'url(images/heart_m.png)';


помогите друзья
  • Вопрос задан
  • 86 просмотров
Пригласить эксперта
Ответы на вопрос 3
@Nikolays93
Web-разработчик
ну наверно как то так.. (не проверял на работоспособность)
(function() {
    // Кол-во кликов
    var clickCount = 0;
    // Массив картинок
    var obBackgrounds = {
        0: 'images/heart_ml.png',
        1: 'images/heart_2.png',
        2: 'images/heart_3.png',
        3: 'images/heart_2.png',
        // ...
    };

    // элемент с которым происходит действие
    var heart_m = document.getElementById('heart_m' + mom);

    // событие нажатия
    heart_m.onclick  = function(e) {
        this.style.backgroundImage = 'url(' + obBackgrounds[ clickCount ] + ')';

        // Если дошли до последней картинки обнуляем счетчик
        if( clickCount >= obBackgrounds.length - 1 ) {
            clickCount = 0;
        }
        else {
            // в след. раз брать следующую картинку
            clickCount++;
        }
    }
})();


обратите внимание что переменная mom в приведенном коде не определена.
Ответ написан
@vladdimir
Верстальщик
может dbclick вам нужен?

если нет, то делайте состояние, вроде как

let isChange = false

elem.onClick = (evt) => {
  evt.preventDefault();
  
  this.style.backgroundImage: isChange ? 'url-to-img' : ''; 
  // Если true, ставим картинку, если нет, не ставим. Или любая другая логика, которая вам нужна.
  
  isChange = !isChange; // Меняем состояние на обратное, чтобы каждый второй клик менял фон
}
Ответ написан
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
Можете по нажатию менять класс на элементе, а в функии клика в зависимости от класса менять либо бэкграунд либо картинку. Аналогично вместо класса можно использовать data-* атрибут для хранения состояния. Например: data-state="background" | data-state="image". Если background То поменять на картинку и поменять дата атрибут на image (this.dataset.state = "image"), если Image то на фон. И тд
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы