...

View Full Version : Help with if/then statements?



ditchfieldcaleb
12-27-2010, 01:48 AM
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>

Krupski
12-27-2010, 02:08 AM
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 http://www.codingforums.com/images/editor/code.gif 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:



<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

ditchfieldcaleb
12-27-2010, 02:34 AM
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.

Krupski
12-27-2010, 02:59 AM
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/802854/why-is-document-write-considered-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

devnull69
12-27-2010, 06:58 AM
And of course it's


type="text/javascript"

instead of


type:"text/javascript"

Syntax is not a matter of "almost right"

ditchfieldcaleb
12-27-2010, 09:34 PM
Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum