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.

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.

• javascript
• jquery
• html
• button
• onclick

• Can you place your code in fiddle ? – Vigneswaran Marimuthu Commented Apr 24, 2015 at 10:46
• 1 why you put document.ready within chooseMap function – Amit Soni Commented Apr 24, 2015 at 10:47
• 1 Most likely chooseMap is not called, when the document is loaded but when you click your button the first time. Then the click event is registered with the button and fires the second time you click it. Is that possible? – Fuzzzzel Commented Apr 24, 2015 at 10:53
• its hard to wrap some buttons in a href link you need to use jquery – madalinivascu Commented Apr 24, 2015 at 10:54
• 2 Super super classic question. You attach your clicks inside another function, so the clicks become active only after that function is called. – Jeremy Thille Commented Apr 24, 2015 at 10:54

3 Answers 3

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');
    })
});

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";
    });
});

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