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 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Help with if/then statements?

    Im trying to figure out why this code won't work. Unsuccessfully. Sorry, didn't know how to use the "CODE" tag.

    <html>
    <head>
    <script type:"text/javascript">
    var BGColor = prompt("Would you like the background of the page to be red, green, or blue?","")
    </script>
    </head>
    <body>
    <script type:"text/javascript">
    if (BGColor == "red")
    { document.write('<body bgcolor= "red">The body of this page is RED. Press F5 to restart!') }
    else if (BGCOlor == "green")
    { document.write('<body bgcolor= "green">The body of this page is GREEN. Press F5 to restart!') }
    else if (BGColor == "blue")
    { document.write('<body bgcolor= "blue">The body of this page is BLUE. Press F5 to restart!') }
    </script>
    </body>
    </html>

  • #2
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by ditchfieldcaleb View Post
    Im trying to figure out why this code won't work. Unsuccessfully. Sorry, didn't know how to use the "CODE" tag.
    First of all, if you want to use the code tag, simply paste your code here, highlight it then press the button.

    Next, the way you were doing the background color was all wrong, so rather than correcting your code, I'll simply give you the right code:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function changeBGColor(color)
    {
        document.body.style.backgroundColor = color;
    }
    </script>
    <style type="text/css" media="screen">
    body {
        font-size:12px;
        border:0;
        margin:0;
        padding:0;
    }
    div.buttons {
        text-align:center;
        margin-top:200px;
    }
    p.message {
        color:#808080;
        font-size:18px;
        font-weight:bold;
        margin:16px;
    }
    </style>
    </head>
    <body>
    <div class="buttons">
    <p class="message">Click a button to set the background color!</p>
    <input type="button" value="Red" onclick="changeBGColor('#ff0000');" />
    <input type="button" value="Green" onclick="changeBGColor('#00ff00');" />
    <input type="button" value="Blue" onclick="changeBGColor('#0000ff');" />
    <input type="button" value="Cyan" onclick="changeBGColor('#00ffff');" />
    <input type="button" value="Magenta" onclick="changeBGColor('#ff00ff');" />
    <input type="button" value="Yellow" onclick="changeBGColor('#ffff00');" />
    <input type="button" value="Black" onclick="changeBGColor('#000000');" />
    <input type="button" value="White" onclick="changeBGColor('#ffffff');" />
    </div>
    </body>
    </html>
    This is a complete ready-to-run demo, but all the code you really need is highlighted in bold (near the top).

    The demo is just to show how it's used.

    Hope this helps.....

    -- Roger

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks! This does help--however, why wouldn't my code work? If you use "red" as an input, it works--but not with blue or green. I understand that its innefficient; however, I don't understand why it doesn't work.

  • #4
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by ditchfieldcaleb View Post
    Thanks! This does help--however, why wouldn't my code work? If you use "red" as an input, it works--but not with blue or green. I understand that its innefficient; however, I don't understand why it doesn't work.
    First.... "document.write" is baaaaaaad. Try to avoid it if possible. Read this: http://stackoverflow.com/questions/8...a-bad-practice

    Next, for green you made a typo... you called "BGCOlor" instead of "BGColor". Javascript is case sensitive. The error also "killed" any code following the error, which is why "blue" also failed.

    Biggest reason that I said your code was "all wrong" was because of the document.write.

    If you want to modify page properties, you should use stylesheets (CSS) or else dynamically change CSS styles as I did in the example.

    Hope it makes sense.....

    -- Roger

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    And of course it's
    Code:
    type="text/javascript"
    instead of
    Code:
    type:"text/javascript"
    Syntax is not a matter of "almost right"

  • #6
    New Coder
    Join Date
    Dec 2010
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks!
    Last edited by ditchfieldcaleb; 12-27-2010 at 09:36 PM.


  •  

    Posting Permissions

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