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

    Javascript For Loop

    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.

    Code:
    <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>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    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.
    Code:
    <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.


  •  

    Posting Permissions

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