Way to clear the screen when function call?

**NitroDev** · 10-19-2013, 08:47 AM

So yeah i need help with that code is here

Code:

<script>
function myInventory()
{
document.write('<pre>');
document.writeln("A warm blanket");
document.writeln('<button onClick="newWorld()">Back</button>');
}
function newWorld()
{
document.write('<pre>');
document.writeln("Hello and welcome to World of My Core!");
document.writeln("What would you like to do?");
  {
  document.writeln('<button onClick="myInventory()">Inventory</button>');
  }
}
</script>

So i want it to clear the screen when i call the function myInventory() and newWorld() with the Back button

**djr33** · 10-19-2013, 08:55 AM

Why are you using document.write? Wouldn't it just be easier to modify an existing element and changing the innerHTML to something new (or no content)? If you want it to be the whole page, then you can create a wrapper <div> that contains everything, or try modifying <body> directly (although I'm not positive that would always work-- there could be security restrictions or browser limitations-- at least I expect there would be at a higher level like the <html> tag).

**NitroDev** · 10-19-2013, 09:05 AM

Okay listen im just a beginner at html5 coding.

But would it really be easier like i don't know how to use <div> like at all

**djr33** · 10-19-2013, 09:18 AM

You should just do some trial and error then and see where it goes.

document.write isn't as useful as it might seem.

You can create a div surrounding the content on your page like this:

Code:

<html>
...
<body>
<div id="mydiv">
... [all of the rest of your page goes here]...
</div>
</body>
</html>

Then you can do something along these lines:
document.getElementById('mydiv').innerHTML = '';
(Set the innerHTML of that div to nothing.)

**NitroDev** · 10-19-2013, 09:23 AM

So like this?

Code:

<html>
<body>
<div id="MenuMech>
function myInventory()
{
document.write('<pre>');
document.writeln("A warm blanket");
document.writeln('<button onClick="newWorld()">Back</button>');
}
function newWorld()
{
document.write('<pre>');
document.writeln("Hello and welcome to World of My Core!");
document.writeln("What would you like to do?");
  {
  document.writeln('<button onClick="myInventory()">Inventory</button>');
  }
}
</div>
</body>
</html>

**NitroDev** · 10-19-2013, 09:24 AM

Originally Posted by NitroDev

So like this?

Code:

<html>
<body>
<div id="MenuMech>
function myInventory()
{
document.write('<pre>');
document.writeln("A warm blanket");
document.writeln('<button onClick="newWorld()">Back</button>');
}
function newWorld()
{
document.write('<pre>');
document.writeln("Hello and welcome to World of My Core!");
document.writeln("What would you like to do?");
  {
  document.writeln('<button onClick="myInventory()">Inventory</button>');
  }
}
</div>
</body>
</html>

Or the intire page?

**NitroDev** · 10-19-2013, 11:15 AM

I need more info

**NitroDev** · 10-19-2013, 11:19 AM

I want to get the page cleared after button click to call function

Code:

<!DOCTYPE html>
<html>
<body>
<script>
<div id="Start">
function myInventory()
{
document.write('<pre>');
document.writeln("A warm blanket");
document.writeln('<button onClick="newWorld()">Back</button>');
}
function newWorld()
{
document.write('<pre>');
document.writeln("Hello and welcome to World of My Core!");
document.writeln("What would you like to do?");
  {
  document.writeln('<button onClick="myInventory()">Inventory</button>');
  }
}
document.getElementById('Start').innerHTML ="";
</script>

<h1>Welcome to My Core</h1>
<p>Start by choosing your name</p>

<form action="">
Username: <input type=" text" name="Username"><br>
</form>
<p>Then choose your gender</p>

<form>
<input type="radio" name="gender" value="Male">Male<br>
<input type="radio" name="gender" value="Female">Female
</form>

<p>Press the Play button to play!<p>

<button onClick="newWorld()">Play</button>
</body>
</div>
</html>

Theres the code so i want it to clear the screen when i call functions myInventory() and newWorld() by pressing the Inventory and Back buttons

**jscheuer1** · 10-19-2013, 11:59 AM

Moderator's Note:

I've merged these two similar threads for now.

In the future, please do not open more than one thread for the same topic, simply continue the thread you've already opened.