...

View Full Version : Javascript For Loop



ditchfieldcaleb
01-05-2011, 10:57 PM
Trying to use a "for" loop to cycle through an array and compare values; if the values are equal, then it displays a message about the team, etc.



<html>

<head>
<title>Javascript Colors!</title>

<script type="text/javascript">

var teamcolors = ["blue","orange","Auburn Tigers","Yuck!","black","red","Georgia Bulldogs","Congratulations!","yellow","black","Georgia Tech","Awesome!"]


function changeBGColor()
{ document.body.bgColor = prompt("What color should the background be?","Put ANY color here!");
checkForTeamColors();
}

function changeTXTColor()
{ document.getElementById("text").style.color = prompt("What color should the text be?","Put ANY color here!");
checkForTeamColors();
}

function checkForTeamColors()
{ var bgcolor = document.body.bgColor
var txtcolor = document.getElementById("text").style.color
var loopcount = 1

while (loopcount <= 12)
{ if ( (bgcolor == teamcolors[loopcount] && txtcolor == teamcolors[loopcount + 1]) || (bgcolor == teamcolors[loopcount + 1] && txtcolor == teamcolors[loopcount]) )
{ alert("You have picked the team colors of " + teamcolors[loopcount + 2] + ". " + taemcolors[loopcount+3]) }
loopcount = loopcount + 4;
}
}
</script>




</head>

<body>

<p id="text" align="center">This text will change color if you want to. <br> Maybe try a certain combination, like Orange and Blue, or Red and Black?<br></p>

<button onClick="changeBGColor()">Click me to change the BG Color!</button>
<button onclick="changeTXTColor()">Click me to change the text Color!</button>

<p id="variables"></p>

<script type="text/javascript"
document.getElementById("variables").innerHTML = ( bgcolor + " " + txtcolor )

</body>

</html>

jmrker
01-06-2011, 05:04 AM
You have several problems, among which are:
1. Typographical error in spelling of variable name
2. Starting the loop check at 1 for a 0 based array definition
3. No checks for entries like BLACK/RED or Black/Red or other case entry errors.
4. Why have an id for a region you don't use, ie: <p id="variables"></p>?
5. Use of reserved word ('text') as id of element. May not give an error, but poor programming practice.
6. Note, instructions not very clear of color entries.
How about limiting possible entries so you don't get: blue/gold, pink/lavender, etc.
Might want to give hint as to which colors are valid possibilities.

This should be closer to what you want.


<html>
<head>
<title>Javascript Colors!</title>

<script type="text/javascript">
// Modified from: http://www.codingforums.com/showthread.php?t=214198

var teamcolors = [
"blue","orange","Auburn Tigers","Yuck!",
"black","red","Georgia Bulldogs","Congratulations!",
"yellow","black","Georgia Tech","Awesome!"
];


function changeBGColor() {
document.body.bgColor
= prompt("What color should the background be?","Put ANY color here!");
checkForTeamColors();
}

function changeTXTColor() {
document.getElementById("txt").style.color
= prompt("What color should the text be?","Put ANY color here!");
checkForTeamColors();
}

function checkForTeamColors() {
var bgcolor = document.body.bgColor.toLowerCase();
var txtcolor = document.getElementById("txt").style.color.toLowerCase()

var loopcount = 0;
while (loopcount < teamcolors.length) {
var flag = false;
if ( (bgcolor == teamcolors[loopcount]) && (txtcolor == teamcolors[loopcount + 1]) ) { flag = true; }
if ( (bgcolor == teamcolors[loopcount + 1]) && (txtcolor == teamcolors[loopcount]) ) { flag = true; }
if (flag) { alert("You have picked the team colors of "
+ teamcolors[loopcount + 2] + ". " + teamcolors[loopcount+3]); }
// else { alert(bgcolor+' : '+txtcolor+' : '+flag+' : '
// + teamcolors[loopcount]+' : '+teamcolors[loopcount+1]); }
loopcount = loopcount + 4;
}
}
</script>

</head>
<body>

<p id="txt" align="center">This text will change color if you want to. <br> Maybe try a certain combination, like Orange and Blue, or Red and Black?<br></p>

<button onClick="changeBGColor()">Click me to change the BG Color!</button>
<button onclick="changeTXTColor()">Click me to change the text Color!</button>

<p id="variables"></p>

<script type="text/javascript"
document.getElementById("variables").innerHTML = ( bgcolor + " " + txtcolor )

</body>
</html>

Check the error console if using FF to view the simple errors you get.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum