...

View Full Version : change div color using prompt boxes



neenz
10-31-2012, 09:00 PM
I need to create a page that will allow users to customize background colors of different DIV boxes on the page.

Here is a link to my assignment:
http://media15live.com/bhcc_javascript_class_notes/assignments/conditional_operators_dynamic_website_builder.htm

I've tried using:
<script type="text/javascript">
alert("Welcome to Nina's Website! \nYou can use our free software to build your own Web page. \nEnjoy!")

var Color = prompt("What background color do you want?", "")
document.getElementById("container").style.backgroundColor = Color;
</script>

I also tried this:
<script type="text/javascript">
alert("Welcome to Nina's Website! \nYou can use our free software to build your own Web page. \nEnjoy!")

var displayColor = prompt("What background color do you want?", "yellow")
if (displayColor == "black" || displayColor == "#000000" || displayColor == null)
{
document.getElementbyID("container").innerHTML=="<span style='" + displayColor +"'></span>"
}
</script>

Please help! Thank you!!! :D

Logic Ali
11-01-2012, 02:43 AM
I've tried using:
<script type="text/javascript">
alert("Welcome to Nina's Website! \nYou can use our free software to build your own Web page. \nEnjoy!")

var Color = prompt("What background color do you want?", "")
document.getElementById("container").style.backgroundColor = Color;
</script>
There's nothing wrong with that code as such.

Here's a useful assignment for you:

Learn to use the error console.

Consider the point at which your code executes.

Philip M
11-01-2012, 08:18 AM
You should be aware that prompts are considered an archaic and ugly method of obtaining user input.

felgall
11-01-2012, 07:23 PM
All the built in dialogs are now considered to be for debugging use only.

In one browser they display an option to turn JavaScript off for the current page.

In some other browsers they display an option allowing you to skip all subsequent dialogs.

Your background color change would not get applied if the person also used the prompt to turn off all the JavaScript on your page.

neenz
11-01-2012, 07:45 PM
You should be aware that prompts are considered an archaic and ugly method of obtaining user input.

i've never seen this method used, but i have to do what my professor assigns me.

Philip M
11-01-2012, 07:59 PM
Yes, we understand that, but it says something about your professor if he is teaching stuff from the last century! Do teachers in other faculties teach long obsolete material?

Old Pedant
11-01-2012, 08:52 PM
Read LogicAli's post again.



Consider the point at which your code executes.


Question for you: Is the HTML element with the id container *ALREADY* created at the time you run this code?

HINT: If it isn't, then how do you expect the JS code to be able to find it?

neenz
11-01-2012, 08:54 PM
Read LogicAli's post again.



Question for you: Is the HTML element with the id container *ALREADY* created at the time you run this code?

HINT: If it isn't, then how do you expect the JS code to be able to find it?

Yes it is.

Old Pedant
11-01-2012, 09:08 PM
So show us the entire HTML for the page.

You may have an HTML error, not a JS error.

But also, as LogicAli said, learn to use the error console or, better, the JavaScript debugger. MSIE 8, MSIE 9, and Chrome all have essentially the same debugger. FireFox has the FireBug plugin which is similar. I have become partial to the Chrome debugger, but all are usable. (Hit the F12 function key to open up the debugger, by the by.)

neenz
11-01-2012, 09:26 PM
thanks everyone!! i figured it out. i added a function & an onload in the body tag of the html.

:thumbsup:

felgall
11-01-2012, 10:27 PM
You shouldn't need an onload in the body tag.

All your JavaScript should be attached immediately before the </body> tag where all the HTML is already loaded before the JavaScript starts to run.

Old Pedant
11-02-2012, 01:30 AM
Yeah, Felgall, but what do you want to bet the instructor would mark the homework wrong for not putting the <script> inside the <head>? Remember, this is a history of JavaScript class. And a lazy instructor.

felgall
11-02-2012, 02:25 AM
Yeah, Felgall, but what do you want to bet the instructor would mark the homework wrong for not putting the <script> inside the <head>? Remember, this is a history of JavaScript class. And a lazy instructor.

You are right - actually where they tell you to put the script is proably a good indicator of whether it is a programming class (scripts go at the bottom of the body) or a history class (scripts used to go in the head).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum