Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help creating code for Background Color by prompt!!!!!!!!!!!!

    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!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Kojiben (11-06-2012)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    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.
    Last edited by Old Pedant; 11-06-2012 at 01:57 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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.

  • #6
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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.

  • #7
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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...

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    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
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Kojiben; 11-06-2012 at 02:34 AM.

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    if you want a space at the end of your string, maybe you should try coding a space at the end of your string?

  • #11
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Old Pedant View Post
    The use of prompt( ) is also considered pretty obsolete.
    For an obvious beginner what built-in alternative would you suggest?

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ... agreed on all points, but surely that line should be
    Code:
    onclick="document.body.style.backgroundColor = color.value;"
    ?

  • #14
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by xelawho View Post
    ... agreed on all points, but surely that line should be
    Code:
    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.
    Last edited by felgall; 11-06-2012 at 08:19 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #15
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by felgall View Post
    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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •