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">
