...

View Full Version : Help creating code for Background Color by prompt!!!!!!!!!!!!



Kojiben
11-06-2012, 01:24 AM
Hello, kinda new here. I am having trouble making a code.
I am trying to create a code to change the background color of the web page based on a prompt to the user.

Example, the webpage will have a box that ask the user "What would you like your background color to be" and based on your typed answer the background color would change. I tried looking online but all the code I found were several lines and the one I learned in class was only about 2-3 lines of code.

This is what I have currently:
var bgColor = prompt("Please type color for the background", "");
document.bgColor("Color " background color= userColor);

It clearly isn't correct otherwise it would work. Can someone help me!? It will be much appreciated!

Old Pedant
11-06-2012, 01:34 AM
Homework?

First of all, if your book or instructor is telling you to use bgColor then the book and/or instructor is/are sadly sadly sadly out of date.

The property you want to use is document.body.style.backgroundColor

Note that only a limited number of color *names* are usable. To be safe, you probably should use hex RGB notation. e.g., #f3ca12

Oh, and while we are at it: The use of prompt( ) is also considered pretty obsolete. As Felgall, one of the regulars here, would say: You seem to be taking a history of JavaScript class and not a modern JavaScript programming class.

Kojiben
11-06-2012, 01:42 AM
Homework?

First of all, if your book or instructor is telling you to use bgColor then the book and/or instructor is/are sadly sadly sadly out of date.

The property you want to use is document.body.style.backgroundColor

Note that only a limited number of color *names* are usable. To be safe, you probably should use hex RGB notation. e.g., #f3ca12

Oh, and while we are at it: The use of prompt( ) is also considered pretty obsolete. As Felgall, one of the regulars here, would say: You seem to be taking a history of JavaScript class and not a modern JavaScript programming class.

Alright, well I think my professor wants us to start out using the old method first then learn the newer ones.

Can you also help me try to create a code that prompts the user for the value of a radius and then display the area of a circle?

Old Pedant
11-06-2012, 01:55 AM
No. At least not yet.

Read rule 1.5 here:
http://www.codingforums.com/rules.htm

AFTER you show you have made a reasonable attempt to do the work we can and will offer hints and nudges. But we won't actually do the work for you.

And your professor is. as it seems the vast majority of them are, lazy and incompetent to be teaching a class that SHOULD be showing you how to code JavaScript as it is used today. Seems like most professors learned something 10 ro 15 years ago and don't see any reason to update their skills. If they were out in industry trying to earn a living they'd either learn modern coding or find themselves out of a job. I suppose, to be fair, this statement to some extent depends on an assumption that you have first learned HTML and CSS before tackling JavaScript. If you have never seen HTML and CSS, then maybe using prompt() and alert() and document.write() can be excused. But in that case the school is remiss in letting you learn JS before learning HTML and CSS.

Kojiben
11-06-2012, 01:59 AM
No. At least not yet.

Read rule 1.5 here:
http://www.codingforums.com/rules.htm

AFTER you show you have made a reasonable attempt to do the work we can and will offer hints and nudges. But we won't actually do the work for you.

And your professor is. as it seems the vast majority of them are, lazy and incompetent to be teaching a class that SHOULD be showing you how to code JavaScript as it is used today. Seems like most professors learned something 10 ro 15 years ago and don't see any reason to update their skills. If they were out in industry trying to earn a living they'd either learn modern coding or find themselves out of a job. I suppose, to be fair, this statement to some extent depends on an assumption that you have first learned HTML and CSS before tackling JavaScript. If you have never seen HTML and CSS, then maybe using prompt() and alert() and document.write() can be excused. But in that case the school is remiss in letting you learn JS before learning HTML and CSS.

She has taught me HTML and after that we went into JS. We kinda just started it though and I did originally have code for what I am asking for but I did not save it on my flashdrive before leaving class so I have to start all over.

Kojiben
11-06-2012, 02:01 AM
No. At least not yet.

Read rule 1.5 here:
http://www.codingforums.com/rules.htm

AFTER you show you have made a reasonable attempt to do the work we can and will offer hints and nudges. But we won't actually do the work for you.

And your professor is. as it seems the vast majority of them are, lazy and incompetent to be teaching a class that SHOULD be showing you how to code JavaScript as it is used today. Seems like most professors learned something 10 ro 15 years ago and don't see any reason to update their skills. If they were out in industry trying to earn a living they'd either learn modern coding or find themselves out of a job. I suppose, to be fair, this statement to some extent depends on an assumption that you have first learned HTML and CSS before tackling JavaScript. If you have never seen HTML and CSS, then maybe using prompt() and alert() and document.write() can be excused. But in that case the school is remiss in letting you learn JS before learning HTML and CSS.

I have used HTML though, we started with that before we moved onto JS. I had already had code ready for what I am asking help on but I forgot to put it on my flashdrive so all that I had is now gone and I need to finish this tonight.

Kojiben
11-06-2012, 02:10 AM
But I did learn HTML from my professor, we just moved on to Javascript. I actually did have the code for the questions I am asking for but I didn't save it to my flashdrive when I left class. You don't have to do my work, I would just like to help trying to solve it...

Old Pedant
11-06-2012, 02:27 AM
So if you saw the code once, you must be able to think about it an reconstruct it.

You prompt for something (the radius).
You get back a value.
You do something to that value to get the area of a circle of that radius.

Could it be that you don't remember your high school geometry class? The formula for the area of a circle? When in doubt:
http://lmgtfy.com/?q=area+of+a+circle+given+its+radius

Kojiben
11-06-2012, 02:30 AM
No no no, I remember the area of a circle. Alright so i got this

var radius = window.prompt("Please Enter Radius");
var result= (3.14 *radius*radius);
alert("The Answer is" + result);

EDIT: It seems to work but it kinda annoys me that the answer is stuck to "is". Basically for example it would show "The Answer is2.88blablaha" and it annoys me that there isn't a space between "is" and the answer.

xelawho
11-06-2012, 02:51 AM
if you want a space at the end of your string, maybe you should try coding a space at the end of your string?

Logic Ali
11-06-2012, 12:22 PM
The use of prompt( ) is also considered pretty obsolete.
For an obvious beginner what built-in alternative would you suggest?

Old Pedant
11-06-2012, 07:37 PM
<html>
<body>
<form>
Choose a background color: <input name="color"/>
<br/>
<input type="button" value="Change background"
onclick="document.body.style.backgroundColor = this.value;" />
</form>
</body>
</html>

Why *NOT* start by using the HTML the student hopefully already knows and then gently introducing JavaScript into it? Start by the simple inline JS in the onclick event. Yes, even that is not "modern", but it's closer. Then the next step is to show using a <script> block to do the same thing. And then move to unobtrusive JS, near the end of the quarter/semester.

And at stage two, put the <script> block just before the </body> so the student doesn't have to worry about code that references HTML elements that aren't yet defined.

Something like changing background color as above is almost ideal for showing how HTML and JS integrate, because you don't have to start by teaching the difference between storing into a form field's value and into other tags innerHTML, just for example.

xelawho
11-06-2012, 07:43 PM
:confused: ... agreed on all points, but surely that line should be

onclick="document.body.style.backgroundColor = color.value;"
?

felgall
11-06-2012, 08:15 PM
:confused: ... agreed on all points, but surely that line should be

onclick="document.body.style.backgroundColor = color.value;"
?

No - You'd need to use document.getElementsByName('color')[0].value to reference the input that whay - whereas this is already a reference to the input field that the JavaScript is attached to.


Also it isn't so much that prompt is obsolete as some browsers have repurposed it as a debugging tool by adding extra checkboxes to it to allow you to turn off JavaScript or all subsequent modal dialogs.

The modern replacements for prompt and confirm are HTML forms and the modern replacement for alert is to use innerHTML to update the page directly. The dialogs were only needed for their original purpose until a mechanism was introduced to allow JavaScript to interact with HTML.

xelawho
11-06-2012, 08:46 PM
No - You'd need to use document.getElementsByName('color')[0].value to reference the input that whay - whereas this is already a reference to the input field that the JavaScript is attached to.


Er - no. The event handler is attached to the button (not the input field), so using this.value will attempt to change the background color to the value of the button, ie "Change background", ignoring completely the value of the input field.

On the other hand, being that the button is within the same form as the input they both exist within the same form scope and the button can reference the input using just its name - at least this is the case in FF, Chrome and IE.

It may not be pretty, but it works - feel free to test for yourself :thumbsup:

Old Pedant
11-06-2012, 11:27 PM
:confused: ... agreed on all points, but surely that line should be

onclick="document.body.style.backgroundColor = color.value;"
?

Yes, my goof. I would personally write it as

onclick="document.body.style.backgroundColor = this.form.color.value;"
I know that form elements can reference other elements in the same form by name alone, but I feel it's a good habit to get into (using this.form.xxx or similar) for when you will move the code out of the element and into unobtrusive JS code.

felgall
11-07-2012, 01:56 AM
Er - no. The event handler is attached to the button (not the input field), so using this.value will attempt to change the background color to the value of the button, ie "Change background", ignoring completely the value of the input field.

Okay, I missed that bit.

Trying to reference the input field the way you have done only works in some browsers though so you'd need to replace it with a proper DOM call if you want it to work in all browsers.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum