Javascript onclick () requires two clicks
I already researched this question on Stack Overflow but could not solve my problem via this and this question.
Here's my problem:
I have three buttons, each calling a function chooseMap()
onclick
, which then redirects the user to a new page based on the button id
. Everything works, but I have to double click every time. Can anyone tell me why this is the case and how can I fix it?
<div class="row text-center" onclick="chooseMap();">
<div class="col-md-4">
<button type="button" class="btn btn-primary" id="world" >World Map</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary" id="europe">Europe</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary" id="sweden">Sweden</button>
</div>
</div>
function chooseMap(){
$(document).ready(function() {
document.getElementById("sweden").onclick = function(){
location.href = "map_game/sweden.html";
}
document.getElementById("europe").onclick = function(){
location.href="map_game/europe.html";
}
document.getElementById("world").onclick = function(){
location.href="map_game/world.html";
}
})
}
Everything is working. I click on a button, a function is called, passes the correct string, and I'm merrily sent to the next page where everything works as well. BUT, I have to double click on the button for it to work. The first time I do nothing. Any thoughts?
source to share
The problem is that the first click executes a function chooseMap
, which then attaches an event handler. The second click then executes the code assigned in those event handlers.
To fix and improve your code, remove the inline attribute onclick
and use jQuery to attach your events. Try the following:
<div class="row text-center">
<div class="col-md-4">
<button type="button" class="btn btn-primary" id="world">World Map</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary" id="europe">Europe</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary" id="sweden">Sweden</button>
</div>
</div>
$(document).ready(function() {
$("#sweden").click(function() {
window.location.assign('map_game/sweden.html');
});
$("#europe").click(function() {
window.location.assign('map_game/europe.html');
});
$("#world").click(function() {
window.location.assign('map_game/world.html');
});
});
Note that you can even improve on this using DRY principles, you can use a single class
element based handler button
and set the url with a button id
button, something like this
$(document).ready(function() {
$(".btn").click(function() {
window.location.assign('map_game/' + this.id + '.html');
})
});
source to share
Use jQuery for event handling, you use it anyway:
$(document).ready(function () {
$('#sweden').on('click', function () {
location.href = "map_game/sweden.html";
});
$('#europe').on('click', function () {
location.href = "map_game/europe.html";
});
$('#world').on('click', function () {
location.href = "map_game/world.html";
});
});
source to share
<div class="row text-center" onclick="chooseMap();">
<div class="col-md-4">
<a href="map_game/sweden.html"
><button type="button" class="btn btn-primary" id="world" >World Map</button></a>
</div>
<div class="col-md-4">
<a href="map_game/europe.html"><button type="button" class="btn btn-primary" id="europe">Europe</button></a>
</div>
<div class="col-md-4">
<a href="map_game/world.html"><button type="button" class="btn btn-primary" id="sweden">Sweden</button></a>
</div>
</div>
source to share