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

    [Urgent]Changing the font color with loop and array

    stuck on a JavaScript homework...created the array but I can't use them in the code...what can i do to make the array usable?
    Instruction:Your code will use an array to store the names of 5 colors: "green", "blue", "yellow", "orange", and "red". The code will prompt the user 4 times for a number between 0 and 4. If the user enters 0, the text color should change to "green", 1 to "blue", etc. If the user enters something that is not a number or not a number between 0 and 4, you should change the background to black.
    here is what I got:
    <html>
    <head>
    <title>Changing Font Color</title>
    </head>

    <body bgcolor="white">
    <h1 id="colors">
    The color is black.
    </h1>

    <h1>
    <script type="text/javascript">
    // Comment row.

    // This function will change the color of the text to the name of the color you give it.
    for (i=0; i < 4; i++)
    var colorText = window.prompt ("Enter a number from 0 to 4: ");
    function changeColor(colorText)
    { var text = document.getElementById("colors[i]");
    text.innerHTML = "<font color=\""+colorText+"\">The color is "+colorText+".</font>";
    }


    // Declare, create, and put values into your color array here
    var colors = new Array (5);
    colors[0] = "green";
    colors[1] = "blue";
    colors[2] = "yellow";
    colors[3] = "orange";
    colors[4] = "blue";
    // Create a loop that runs 4 times.
    // Each time it asks the user for a number between 0 and 4.
    // If an invalid input is entered, the color displayed should be black.
    // Otherwise display the color at that index in the array.
    </script>
    </h1>
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Makes no sense.

    You have
    Code:
    <h1 id="colors">
    but then you do
    Code:
        document.getElementById("colors[i]")
    You don't have any element with an id of colors[i]

    YOu seem to be mixing up the id of the element with your array of colors.

    Oh...and you do not need and should not be using a function in that code.
    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.

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Makes no sense.

    You have
    Code:
    <h1 id="colors">
    but then you do
    Code:
        document.getElementById("colors[i]")
    You don't have any element with an id of colors[i]

    YOu seem to be mixing up the id of the element with your array of colors.

    Oh...and you do not need and should not be using a function in that code.
    I tried a different approach but the "document.write" stopped working and all I got was 4 prompt boxes

    Code:
    <html>
    <head>
    <title>Task 2</title>
    </head>
    
    <body bgcolor="white">
    <h1>
    	<script type="text/javascript">
    		// Comment Row.
    
    		// This function will change the color of the text to the name of the color you give it.
    			
    			for (i=0; i < 4; i++)
    			var colorText = window.prompt ("Enter a number from 0 to 4: ");
    		{	if (colorText == "0")
    			document.write("<font color=\""+colors[0]+"\">The color is "+colors[0]+".</font>");
    			else if (colorText == "1")
    			document.write("<font color=\""+colors[1]+"\">The color is "+colors[1]+".</font>");
    			else if (colorText == "2")
    			document.write("<font color=\""+colors[2]+"\">The color is "+colors[2]+".</font>");
    			else if (colorText == "3")
    			document.write("<font color=\""+colors[3]+"\">The color is "+colors[3]+".</font>");
    			else if (colorText == "4")
    			document.write("<font color=\""+colors[4]+"\">The color is "+colors[4]+".</font>");
                            else
                            document.write("The color is black.");
    		}
    		
    		
    		
    		// Declare, create, and put values into your color array here
    			var colors = new Array (5);
    			colors[0] = "green";
    			colors[1] = "blue";
    			colors[2] = "yellow";
    			colors[3] = "orange";
    			colors[4] = "blue";
    			
    		// Create a loop that runs 4 times.
    		// Each time it asks the user for a number between 0 and 4.
    		// If an invalid input is entered, the color displayed should be black.
    		// Otherwise display the color at that index in the array.
    	</script>
    </h1>
    </body>
    </html>

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,893
    Thanks
    202
    Thanked 2,528 Times in 2,506 Posts
    You cannot use document.write() more than once.

    document.write() is in effect obsolete. document.write() statements must be run before the page finishes loading. Any document.write() statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page (including the Javascript which called it). So document.write() is at best really only useful to write the original content of your page. It cannot be used to update the content of your page after that page has loaded.

    <font> tags ae also obsolete.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    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.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,893
    Thanks
    202
    Thanked 2,528 Times in 2,506 Posts
    Here you are (it does not work in IE as the handling of prompts within loops in IE is buggy and only the final text is displayed).

    Code:
    <html>
    <head>
    <title>Changing Font Color</title>
    </head>
    
    <body bgcolor="white">
    <h1>
    <span id="mytext">  The color is black. </span>
    </hi>
    <script type="text/javascript">
    
    // Declare, create, and put values into your color array here (must be declared before they are referenced)
    var colors = [];
    colors[0] = "black";
    colors[1] = "blue";
    colors[2] = "yellow";
    colors[3] = "orange";
    colors[4] = "blue";
    colors[5] = "green";
    // Create a loop that runs 4 times.
    // Each time it asks the user for a number between 0 and 5.
    // If an invalid input is entered, the color displayed should be black.
    // Otherwise display the color at that index in the array.
    
    for (i=0; i < 4; i++) {
    var c = window.prompt ("Enter a number from 0 to 5: ", "");
    c = Number(c) || 0;  // trap NaN - default black
    if (c >5) {c=0};  // trap entry over 5
    var col = colors[c];
    document.getElementById("mytext").innerHTML = "<font color=\""+col+"\">The color is "+col+".</font>";
    }
    
    
    </script>
    </body>
    </html>
    Last edited by Philip M; 11-06-2012 at 08:42 AM.

    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.

  • #6
    New Coder
    Join Date
    Sep 2010
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    jayakodiu@yahoo.com

    The following code works fine with IE:

    code:
    <html>
    <head>
    <title>Changing Font Color</title> </head>
    <body> <h1> <span id="mytext"> The color is black. </span> </hi>
    </body>
    <script type="text/javascript">
    var colors = []; colors[0] = "black"; colors[1] = "blue"; colors[2] = "yellow"; colors[3] = "orange";
    colors[4] = "blue"; colors[5] = "green";
    for (i=0; i < 4; i++) {
    var c = window.prompt ("Enter a number from 0 to 5: ", "");
    c = Number(c) || 0; if (c >5) {c=0};
    mytext.style.color=colors[c]
    mytext.innerText="The color is "+colors[c]
    }
    </script>
    </html>

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,893
    Thanks
    202
    Thanked 2,528 Times in 2,506 Posts
    The OP wanted that the script asked the user to input his choice 4 times (using a loop). Not just once.


    mytext.style.color=colors[c]

    Not sure if the OP had learned any CSS at this stage.
    Last edited by Philip M; 11-08-2012 at 07:50 PM.

    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.


  •  

    Posting Permissions

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