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.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    change div color using prompt boxes

    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_javascri...te_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!!!

  • #2
    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 neenz View Post
    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.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    You should be aware that prompts are considered an archaic and ugly method of obtaining user input.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Last edited by felgall; 11-01-2012 at 07:25 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.

  • #5
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    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.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    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?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    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?
    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.

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

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    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.)
    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.

  • #10
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks everyone!! i figured it out. i added a function & an onload in the body tag of the html.


  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    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.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,423 Times in 4,388 Posts
    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.
    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
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    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).
    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.


  •  

    Posting Permissions

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