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

Question

[Богдан Глушко]

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)';

помогите друзья

Comments

[letMeDie]

Ну создай счётчик нажатий и там уже для нужного количества нажатий задавай поведение

Answer 1

[Nikolay S.]

ну наверно как то так.. (не проверял на работоспособность)

(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 в приведенном коде не определена.

Answer 2

[Владимир Солнцев]

может dbclick вам нужен?

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

let isChange = false

elem.onClick = (evt) => {
  evt.preventDefault();
  
  this.style.backgroundImage: isChange ? 'url-to-img' : ''; 
  // Если true, ставим картинку, если нет, не ставим. Или любая другая логика, которая вам нужна.
  
  isChange = !isChange; // Меняем состояние на обратное, чтобы каждый второй клик менял фон
}

Comments

[Nikolay S.]

Судя по форматированию кода - человек еще только учится, а вы ему сразу стрелочные функции ES6 предлагаете. Расскажите ему еще что такое babel :)

[Владимир Солнцев]

Nikolay S., это просто для примера же) Зато человек, когда будет читать, узнает что можно и так.
Может он учится по древнему учебнику или курсу нулевых годов и совсем не знает, что многое поменялось-добавилось. Вот заодно и тонкий намек оставил на нововведения)