Изменить изображение и изменить его обратно с JavaScript событий щелчка

Question

У меня есть следующий код:

window.onload = function() { 
'use strict'; 

var alcohol = document.getElementById('alcohol'); 

var changeImage = function (event) { 
    alcohol.src = "image/alcohol3.jpg"; 
}; 

var changeBack = function (event) { 
    alcohol.src = "image/alcohol.jpg"; 
}; 

addHandler(alcohol, "click", changeImage); 
// addHandler(alcohol, "mouseout", changeBack); 

Как я могу изменить изображение обратно со вторым событием щелчка? На данный момент он не работает.

Answer 1

Изменить changeImage функцию:

var changeImage = function (event) { 
    if (alcohol.src != "image/alcohol3.jpg"){ 
     alcohol.src = "image/alcohol3.jpg"; 
    } 
    else 
    { 
     alcohol.src = "image/alcohol.jpg"; 
    } 
}; 

Answer 2

Вы можете использовать тумблер:

$("#alcohol").toggle(
    changeImage() , 
    changeBack() 
); 

Answer 3

Вы можете использовать замыкание как это сделать так:

var changeImage = function() { 
    function a(event) { 
     alcohol.src = "image/alcohol3.jpg"; 
     event.srcElement.onclick = b; 
    } 
    function b(event) { 
     alcohol.src = "image/alcohol.jpg"; 
     event.srcElement.onclick = a; 
    } 
    return a; 
} 
addHandleaddHandler(alcohol, "click", changeImage()); 

Сначала это функция a, назначенная в качестве обработчика, и каждое событие поднято, обработчик между a и b.