You can't use document.write()
once the document has completed loading. If you do, the browser will open a new document that replaces the current and this is the reason why your footer text isn't showing in output (home.html
).
Use the innerHTML property to put HTML code inside an element
So, in your home.html change document.write()
to
document.getElementById("body").innerHTML="Welcome "+mytext+"!"; // here body name is the ID of element where you want to display your message.
Here is updated home.html
<html>
<head>
<script>
// Called on body's `onload` event
function init() {
// Retrieving the text input's value which was stored into localStorage
var mytext = localStorage.getItem("mytext");
// Writing the value in the document
document.getElementById("body").innerHTML="Welcome "+mytext+"!"; // <-- this will display message in a element with id "body"
}
</script>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="init();">
<div id="container">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="body"> <!-- message will be shown here -->
</div>
<div id="rightcolumn">
</div>
<div id="footer">
Department of Computing
</div>
</div>
</body>
</html>