What's the javascript code to load an html page on button click?

Question

I have an html page with a button. I need it to load another html page, (course.html), when clicked.

Does anyone know the javascript code for that?

Here are the code sections I have

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=divice-width, initial-scale=1">
    
    <script type="text/javascript">
        function loadCourse(){
            <!--??????-->
        }
    </script>
</head>

<body>
    <input type="button" id="myButton" value="Find your course now!">

    <script type="text/javascript">
        document.getElementById("myButton").onclick = "loadCourse()">
        };
    </script>
</body>

What do you mean by *load*? Do you want to redirect to another html page? — Hao Wu, Nov 09 '20 at 08:01

score 0 · Answer 1 · answered Nov 09 '20 at 08:02

0

window.location = "html.page" will help you when no framework is in use.

answered Nov 09 '20 at 08:02

eliprodigy

600
6
8

score -1 · Answer 2 · answered Nov 09 '20 at 08:03

-1

You don't need JavaScript for that. Just wrap button with <a> tag:

<a href="course.html">
    <button>Find your course now!</button>
</a>

answered Nov 09 '20 at 08:03

Sanlyn

139
1
12

HTML forbids button elements appearing as descendants of a element. – Quentin Nov 09 '20 at 08:22

score -1 · Accepted Answer · answered Nov 09 '20 at 08:16

If your goal is to load another webpage contents into current page element, then you can use next javascript code:

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=divice-width, initial-scale=1">
        
        <script type="text/javascript">
            function loadCourse(){
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4){
                        document.getElementById('result').innerHTML = xhr.responseText;
                    }
                };
                xhr.open('GET', '/courses/random.php');
                xhr.send();
            }
        </script>
    </head>

    <body>
        <div id="result">Course not loaded</div>
        <input type="button" id="myButton" onclick="loadCourse();" value="Find your course now!">
    </body>
</html>

What's the javascript code to load an html page on button click?

3 Answers3