Changing the color of text with Javascript
Question
I'm trying to make a program where I use a function to change the color of pre-written text using an array and a for loop, depending on what the user inputs when prompted. Here is my code:
// <Student Name> <Student ID> comment must be here. // This function will change the color of the text to the name of the color you give it. function changeColor(colorText) { var text = document.getElementById("colorpar"); 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] = "red"; // 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. for (var i = 1; i <= 4; i++) { var colNumber = window.prompt("Enter a number from 0 to 4:"); if (colNumber == 0 || colNumber == 1 || colNumber == 2 || colNumber == 3 || colNumber == 4) { changeColor(colors[colNumber]); } else { changeColor("black"); } }
<html> <head> <title>Lab 7 Task 2</title> </head> <body bgcolor="white"> <h1 id="colorpar"> The color is black. </h1> <h1> </h1> </body> </html>
What happens is the text will only show once I've done all of the prompts. It shows the proper color and text and everything, but at the start the "The color is black." doesn't show up, and nothing does until the last prompt is answered.
Note that this is for a beginner class so anything much more advanced than what I have here won't be of much help. I did not write the function, it is there as part of the assignment. I've been at this for hours and can't figure out the issue!
1 answers
solution1
2 2016-11-02 04:45:12
Use SetInterval for this.
check the following code snippet
function changeColor(colorText) { var text = document.getElementById("colorpar"); 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] = "red"; // 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. var x = 0; var intervalId = setInterval(function() { if (x == 4) { clearInterval(intervalId); } var colNumber = window.prompt("Enter a number from 0 to 4:"); if (colNumber == 0 || colNumber == 1 || colNumber == 2 || colNumber == 3 || colNumber == 4) { setTimeout(changeColor(colors[colNumber]), 1000); } else { changeColor("black"); } x++; }, 100);
<body bgcolor="white"> <h1 id="colorpar"> The color is black. </h1> <h1> </h1> </body>
Hope this helps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.