Javascript - event listener toggle button
        Posted  
        
            by 
                user2546157
            
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by user2546157
        
        
        
        Published on 2013-07-03T11:00:03Z
        Indexed on 
            2013/07/03
            11:05 UTC
        
        
        Read the original article
        Hit count: 286
        
JavaScript
I'm trying to create a button which can toggle "double click" to "single click" and in the opposite. For some reason, once it toggles to single click and it cannot toggle back. Can anyone please help!
function init() {
    normal_listeners();
}
function addListener(){
    var image1 = document.getElementById('image_1');
    var image2 = document.getElementById('image_2');
    var image3 = document.getElementById('image_3');
    if(document.getElementById('listener_1').value == "Listener"){
        document.getElementById('listener_1').style.backgroundColor = "red";
        alert("Normal");
        image1.addEventListener("dblclick", function(){userChoice(1);}, false);
        image2.addEventListener("dblclick", function(){userChoice(2);}, false);
        image3.addEventListener("dblclick", function(){userChoice(3);}, false); 
        document.getElementById('listener_1').value = "Normal";
    } 
    else if(document.getElementById('listener_1').value == "Normal") {
        document.getElementById('listener_1').style.backgroundColor = "green";
        alert("Listener");
        image1.addEventListener("click", function(){userChoice(1);}, false);
        image2.addEventListener("click", function(){userChoice(2);}, false);
        image3.addEventListener("click", function(){userChoice(3);}, false);
       document.getElementById('listener_1').value = "Listener";
   }
}
function normal_listeners(){
    var image1 = document.getElementById('image_1');
    var image2 = document.getElementById('image_2');
    var image3 = document.getElementById('image_3');
    var listener1 = document.getElementById('listener_1');
    listener1.addEventListener("click", addListener, false);    
    image1.addEventListener("dblclick", function(){userChoice(1);}, false);
    image2.addEventListener("dblclick", function(){userChoice(2);}, false);
    image3.addEventListener("dblclick", function(){userChoice(3);}, false);
 }
 window.onload = init;
 <img id="image_1" src="rock.jpg" alt="ROCK" width="100" height="100">
 <img id="image_2" src="paper.jpg" alt="PAPER" width="100" height="100">
 <img id="image_3" src="scissors.jpg" alt="SCISSORS" width="100" height="100">
 <input type="button" id="listener_1" value="Normal" style="background-color:red"> 
© Stack Overflow or respective owner