Way to clear the screen when function call? [Archive]

NitroDev

10-19-2013, 08:47 AM

So yeah i need help with that code is here

<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:

<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?

<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

So like this?

<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

<!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.