TransWikia.com

AJAX switching HTML

Stack Overflow Asked by mimi on January 26, 2021

So I want the screen to switch from one HTML to another HTML and this is my JS code. Whenever I press the button, the screen goes blank.

I am trying to make multiple HTML pages and make it switch to the next one whenever I press a button. Please help

JS

function loadScreen()
{
  var load = new XMLHttpRequest();
  load.onreadystatechange = function()
  {
      document.getElementById("firstScreen").innerHTML = this.responseText;
    }
  load.open("GET", "SelectNumber.html", true);
  load.send();
}
function myFunction(load)
{
  document.getElementById("firstScreen").innerHTML = load.responseText;
}

Original HTML

<head>
  <meta charset="UTF-8">
  <title>Number Game</title>
  <link rel = "stylesheet" href = "stylesheet.css">
</head>
<body>
  <div id = "firstScreen">

    <h1 id ="Title" class = "title">
      The<br>Number Game
    </h1>

    <div class = "start_button">
      <h3 class = "start">START
        <input type = "image" placeholder = "START" src = "button.png" class = "button1"  onclick = "loadScreen()">
      </h3>
    </div>
  </div>

</body>
<script src = "Main.js"> </script>
</html>

HTML2 that I am trying to make it change to

<html>
<head>
  <meta charset="UTF-8">
  <title>Number Game</title>
  <link rel = "stylesheet" href = "stylesheet.css">
</head>
<body>

  <div id="Screen2">
    <p> Hello World</p>
  </div>


  <script src = "Main.js"> </script>

</body>
</html>

One Answer

Using Visual Studio code with the Live Server plugin has solved the problem!

Answered by mimi on January 26, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP