Javascript onclick() requires two clicks

Question

I have three buttons, each calls chooseMap() function onclick which then redirects user to a new page based on button id . Everything works but I have to click twice every time. Can anyone tell me why this is, and how I can 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 works. I click on the button, function is called, passes the correct string and I'm merrily sent to the next page where everything also works. BUT, I have to click twice on the button to make it work. First time I click nothing happens. Any thoughts?

I already researched this question on Stack Overflow but was not able to address my issue via this and this question.

Answer 1

The issue is because the first click executes the chooseMap function which then attaches the event handler. The second click then executes the code that's assigned in those event handlers.

To fix and improve your code, remove the inline onclick attribute and use jQuery to attach your events. Try this:

<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 could even improve this further by using DRY principles you can use a single handler based on the class of the button elements, and set the URL using the id of the button, something like this:

$(document).ready(function() {
    $(".btn").click(function() {
        window.location.assign('map_game/' + this.id + '.html');
    })
});

Answer 2

Use jQuery for event handling, you are using 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";
    });
});

Answer 3

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