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