CODEWITHSUNDEEP
javascripthtmlweb-applications
Beck
Beck

Reputation: 47

Can I replace the screen with JS or HTML?

Is it possible to use Javascript or HTML to change the the HTML contents?

For example, I have 

<HTML>
<head>
<title>Hello!</title>
</head>

<body>
Click the button below to go to page two.
<button type="button" onclick="gotopage2">Click Me!</button>
</body>
</html>

and I am trying to make it to where when the button is clicked, the page changes to:

<HTML>
<head>
<title>Hello!</title>
</head>

<body>
Welcome to page 2!
</body>
</html>

That way, a user can simply click the button and have the page seemingly change without having to load a new page. Like going into a house on a video game.

This is for a mini webapp I'm making, so that when a user clicks an icon, it takes them to a new screen depicting an image and a body of text.

Upvotes: 0

Views: 115

Answers (4)

Priyank
Priyank

Reputation: 3868

Just try this,you just need to Id for your body and in your onclick function should be onclick="gotopage2()" instead of onclick="gotopage2"

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body id = 'newPage'>
Click the button below to go to page two.
<button type="button" onclick="gotopage2()">Click Me!</button>
<script>
function gotopage2() 
{
var text = "Welcome to page 2!"
$("#newPage").html(text);
}
</script>


</body>
</html>

Upvotes: 0

Manu K M
Manu K M

Reputation: 46

we can use the innerHTML property to change the html element value, make use the following code sample. 

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Welcome to page 2!";
}
</script>
<HTML>
<head>
<title>Hello!</title>
</head>

<body id="demo">
Click the button below to go to page two.
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>

Upvotes: 1

jmore009
jmore009

Reputation: 12923

if you'e going to be swapping out a lot of content or multiple pages worth you could use Jquery's .load() to replace the content with a different file:

HTML

<div class="content">
  Click the button below to go to page two.
  <button type="button" class="replace">Click Me!</button>
</div>

CSS

$(".replace").click(function(){
  $(".content").load( "file.html" );
});

otherwise you can just have the text in a variable and swap it like so:

$(".replace").click(function(){
  var text = "Welcome to page 2!"
  $(".content").html(text);
});

FIDDLE

Or you could just use innerHTML like Manu K M suggested if you want a pure Javascript solution.

Upvotes: 0

Ahosan Karim Asik
Ahosan Karim Asik

Reputation: 3299

Try this

function load_html() {
  $("html").html("<head><title>Hello!</title></head><body>Welcome to page 2!</body></html>");
  //or another file then use
  //$( "html" ).load( "/resources/load.html html" );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<HTML>

<head>
  <title>Hello!</title>
</head>

<body>
  Click the button below to go to page two.
  <button type="button" onclick="load_html()">Click Me!</button>
</body>

</html>

Upvotes: 0

Related Questions