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: 180

Filed under:

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

Related posts about JavaScript