return javascript output message into body of html

Question

Display web page background, on the web page I want a image that when clicked it runs a javascript alert that asks to enter two integers. If one is more/less then it displays the output in the javascript alert window. If it is equal it returns the saying "The numbers "" and "" are equal."

FIRST PROBLEM: is that once the button is clicked my .gif background stops running once the javascript alert window pops up. I would like to keep my .gif animation running while the java alert is going on. (i.e. the .gif is of ocean waves)

THIS PART IS CORRECT: If one is more/less then it displays the output in the javascript alert window.

SECOND PROBLEM: If it is equal it returns the saying "The numbers "" and "" are equal. It does give me the correct output, except when it returns the value my .gif is gone and all I have is just the saying "The numbers "" and "" are equal. on a blank webpage. I would like it to display the saying on the webpage with the .gif background.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<style>

html{
    background-image:url(images/BirdsOnThePost.gif);
    background-size:cover;
    background-color:#FFF;
    background-repeat:no-repeat;
    height:100%; 
}

h1{
    font-size:40px;
    font-family: 'Special Elite', cursive;
    color:#FFF;
    text-shadow: 3px 3px 3px #333333;
}




</style>
<script>

function myFunction()
{

// Wait for window load

var firstnum;
var secondnum;
firstnum = window.prompt("Enter any Integer Value:");
secondnum = window.prompt("Enter any second Integer Value:");
var first = parseInt(firstnum);
var second = parseInt(secondnum);
if(first>second)
{
window.alert( first + " is Larger than " + second );
}
else if(second>first)
{
window.alert( second + " is Larger than " + first );
}

else if(first == second)
{
document.writeln("<h1>The numbers "  + first + " and " + second +  " are equal</h1> ");
}
}


</script>

</head>

<body>

<h1></h1>
<input type="button" onclick="myFunction()" value="Show alert box" />
</body>

</html>

Have you considered using a library like jQuery?

DevlshOne
– DevlshOne

2013-09-15 16:25:48 +00:00
Commented Sep 15, 2013 at 16:25 — DevlshOne
– DevlshOne, Commented Sep 15, 2013 at 16:25

Andy · Accepted Answer · 2013-09-15 17:15:08Z

1

I can help with the second problem.

If you add an element to your page like:

<div id="output"></div>

and then instead of

document.writeln("<h1>The numbers "  + first + " and " + second +  " are equal</h1> ");

have

var html = "<h1>The numbers "  + first + " and " + second +  " are equal</h1>"
document.getElementById('output').innerHTML = html;

this will print your message over the background like you want.

As the the first problem, I ran an animated gif in the background using your code and it didn't stop when I clicked the alert button, so I don't know what's going on with that. It seems fine.

edited Sep 15, 2013 at 17:15

answered Sep 15, 2013 at 17:08

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dewayne Phillips Over a year ago

Got it. Thanks I am new to javascript and it is a bit confusing at times.

Collectives™ on Stack Overflow

return javascript output message into body of html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related