5 Replies - 7907 Views - Last Post: 16 January 2012 - 04:14 PM

#1 oldnewbie  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 64
  • Joined: 16-December 11

Change background with alert box "Ok"

Posted 16 January 2012 - 11:50 AM

We've just been introduced to Javascript. I have a document where as it loads it gives an alert box. Upon clicking "OK" it brings up a header and an image and then another alert box stating that the page is now loaded. However, I need to change the background of the document by clicking on the "OK" button in the second alert box but can't figure out how to do that. Here's what I have so far, which I'm not quite sure is correct. Can anyone point me in the right direction? Thank you.

<style type="text/css">
		
		.header2 {
			text-align:center;
		}
		
		p.center 
		{
		    text-align:center;
		}
		
		.center img
		{
		    border-style: none;
		}
		
		</style>
		
		<script type="text/Javascript">
			function rollover_onmouseover() {
			document.images.real.src = "../../Images/Homework 13/dream.jpg";
}
			function rollover_onmouseout() {
			document.images.real.src = "../../Images/Homework 13/real.jpg";
}
			
		</script>
			
	</head>

	<body>
	
		<script type="text/Javascript">
		   alert("I'm about to load my page"); 
       </script>
	   
	   <script type="text/Javascript">
			document.write('<h2 class="header2">This h2 header was loaded using Javascript</h2>');
		</script>
	   
 
		<p class="center">Point at Llumi to see what she's thinking<br />
			<a href="Homework13.html" id="rollover" onmouseover="rollover_onmouseover()" onmouseout="rollover_onmouseout()">
			<img src="../../Images/Homework 13/real.jpg" alt="" name="real" /></a>
 
		</p>
 
		<script type="text/Javascript">
		   alert("My page is now loaded"); 
       </script>
 
 
	</body>

</html>



Is This A Good Question/Topic? 1
  • +

Replies To: Change background with alert box "Ok"

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,964
  • Joined: 08-June 10

Re: Change background with alert box "Ok"

Posted 16 January 2012 - 12:02 PM

The only thing the alert() function does is halt the execution of the script, show the alert box, and then resume the script once the "OK" button is pressed. So all you have to do to make something happen when the "OK" button is pressed is put the code right after the alert("...") call.

To change the background of the page, set the style.background property of the <body> element. Like this:
// Change the color
document.body.style.background = "#F00";

// Or you can also use this to set an image as the background
document.body.style.background = "url(/path/to/image.png)";


Was This Post Helpful? 0
  • +
  • -

#3 oldnewbie  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 64
  • Joined: 16-December 11

Re: Change background with alert box "Ok"

Posted 16 January 2012 - 12:12 PM

Like this? The second alert box doesn't run now though. Guess I'm doing something wrong. Do I need an onclick or something, although I tried that and it didn't work? Thanks.


<script type="text/Javascript">
		   alert("My page is now loaded") document.body.style.background="#F00";
       </script>



Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,964
  • Joined: 08-June 10

Re: Change background with alert box "Ok"

Posted 16 January 2012 - 12:32 PM

Put it in the next line, not as a part of the line the alert is in. These are separate commands. Like I say, the alert only halts the execution of the script, and once you close it the next line after it gets executed. You don't need to listen for a click event or do anything with the alert box.


Also, I made a few adjustments and comments on your code. Perhaps this can help you out some.
Spoiler

Was This Post Helpful? 0
  • +
  • -

#5 oldnewbie  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 64
  • Joined: 16-December 11

Re: Change background with alert box "Ok"

Posted 16 January 2012 - 12:57 PM

Thank you, Atli. These tips are very helpful. Can you explain what the "var" is when used with the mouseover function?
Was This Post Helpful? 0
  • +
  • -

#6 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,964
  • Joined: 08-June 10

Re: Change background with alert box "Ok"

Posted 16 January 2012 - 04:14 PM

The var keyword is used to declare a local variable. If a variable is declared without the keyword, it becomes a global variable.

It's important to realize the difference here, because it can alter the behavior of your code significantly. For example, if you consider this function:
function countUp(ceiling) {
    position = 0;
    counterID = setInterval(function() {
        ++position;
        console.log("Count: " + position);
        if (position == ceiling) {
            clearInterval(counterID);
        }
    }, 1000);
}


This will simply count from one to ceiling, one number per second. The important thing to notice here is that I left out the var keywords, which makes both the variables there global variables.

If you were to call this function twice in your code, you might expect to see two separate counts, each counting from 1 to ceil.
Count: 1
Count: 1
Count: 2
Count: 2
Count: 3
Count: 3
Count: 4
Count: 4
Count: 5
Count: 5


The result, however, would be that both calls would share the global position variable, making the output look like this:
Count: 1
Count: 2
Count: 3
Count: 4
Count: 5
Count: 6
Count: 7
// etc...


The bigger problem in this is that, because it is global, the counterID variable gets overwritten in the second call to the countUp function, meaning that the clearInterval from the first call actually clears the setInterval from the second call, leaving the first interval to continue to tick on indefinitely, continuing the count without stopping.

By adding the the var keyword to both the variables, you make them local to each function call, meaning they can coexist without overwriting each other. This also means that when you are done with them (that is: when the function is done) both variables will be automatically cleared out, rather than being left to sit unused in the global scope.
function countUp(ceiling) {
    var position = 0;
    var counterID = setInterval(function() {
        ++position;
        console.log("Count: " + position);
        if (position == ceiling) {
            clearInterval(counterID);
        }
    }, 1000);
}



So the moral of the story is this: Unless you are specifically trying to use a global variable, declare your variables using the var keyword. It's generally considered bad practice to pollute the global scope, and there is rarely a good reason why you would need to.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1