After loading my webpage, I click on a link and the expected javascript runs as planned. However, once it completes and presents the results, the page goes blank to a white screen displaying only the outcomes. My goal is to have these results showcased on the webpage with the background intact. Despite numerous attempts, I have been unable to achieve this. Below is the code snippet in question:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function myFunction()
{
var accountnum;
var beginningBal;
var itemsCharged;
var credits;
var creditLimit;
var sum;
accountnum = window.prompt("Enter the account number:");
beginningBal = window.prompt("Enter the beginning balance:");
itemsCharged = window.prompt("Total of all items charged:");
credits = window.prompt("Total credits applied to this account:");
creditLimit = window.prompt("Enter the credit limit: ");
var zero = parseInt (accountnum);
var first = parseInt(beginningBal);
var second = parseInt(itemsCharged);
var third = parseInt (credits);
var fourth = parseInt (creditLimit);
var sum = first + second - third;
var diff = fourth - sum;
if (sum < fourth)
{
document.writeln("<h1>Your account number is:" + zero);
document.writeln("<h1>Your beginning balance is: $" + first);
document.writeln("<h1>Total of items charged: $" + second);
document.writeln("<h1>Total credits applies to this account: $" + third);
document.writeln("<h1>Your credit limit is: $" + fourth);
document.writeln("<h1>Your account balance is: $" + sum);
document.writeln("<h1>Your credit is: $" + diff);
document.getElementById('output').innerHTML = html;
}
else if (sum > fourth)
{
document.writeln("<h1>Your account number is:" + zero);
document.writeln("<h1>Your beginning balance is: $" + first);
document.writeln("<h1>Total of items charged: $" + second);
document.writeln("<h1>Total credits applies to this account: $" + third);
document.writeln("<h1>Your new account balance is: $" + sum);
document.writeln("<h1>Your credit limit is: $" + fourth);
document.writeln("<h1>Your new balance is: $" + diff);
document.writeln("<h1>Your credit is exceeded!");
document.getElementById('output').innerHTML = html;
}
else if (sum == fourth)
{
document.writeln("<h1>Your account number is:" + zero);
document.writeln("<h1>Your beginning balance is: $" + first);
document.writeln("<h1>Total of items charged: $" + second);
document.writeln("<h1>Total credits applies to this account: $" + third);
document.writeln("<h1>Your account balance is: $" + sum);
document.writeln("<h1>Your credit limit is: $" + fourth);
document.writeln("<h1>Your new balance is: $" + diff);
document.writeln("<h1>You are out of credit!");
document.getElementById('output').innerHTML = html;
}
}
</script>
<style>
#output{
height:43px;
}
html{
background: url(images/nxerainbowgrid.jpg) no-repeat center center fixed;
z-index:-9999;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/nxerainbowgrid.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/nxerainbowgrid.jpg', sizingMethod='scale')";
}
</style>
</head>
<body>
<a href="#" onClick="myFunction()"><p>CLICK HERE TO HAVE FUN!!!</p></a>
<div id="output"></div>
</body>
</html>