'Javascript: Load an HTML page with button click

I have a button defined in HTML.

I want to load a page background.html when this button is clicked. But I want to do it from javascript, not from inside the .html file. So on my register.js file I have below:

$(document).ready(function() {
  $("#btnApply").click(function() {
    window.open("background.html");
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnApply" value="Register">

But this doesn't load the page. What am I missing?

javascriptjqueryhtml


Solution 1:[1]

<input type = "button" id = "btnApply" value = "Register" onclick="loadPage()">

then the function could be in your register.js file as :

    function loadPage()
{

     window.location="background.html";

}

Solution 2:[2]

It might be because popups are blocked on that page. All you need is to allow them (a screenshot from Chrome):

enter image description here

And ensure that you:

  1. Run this code in the browser (otherwise you will not have window object)

  2. background.html is in the same folder as your script

Solution 3:[3]

The open() method opens a new browser window. If you want it to load from the same window use location object.

window.location.assign("background.html");

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 David Davolu Oluyale
Solution 2
Solution 3 stefan

Related Questions