[Urgent]Changing the font color with loop and array

rhollu · 11-06-2012, 03:05 AM

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:

Quote:

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

Old Pedant · 11-06-2012, 03:37 AM

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.

rhollu · 11-06-2012, 03:40 AM

Quote:

Originally Posted by Old Pedant

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>

Philip M · 11-06-2012, 07:27 AM

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.

Philip M · 11-06-2012, 08:38 AM

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>

u jayakodi · 11-08-2012, 01:03 PM

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>

Philip M · 11-08-2012, 07:48 PM

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.