Question

使用 Javascript 改变文本颜色

2016-11-02

329

javascript

我正在尝试编写一个程序，使用一个函数通过数组和 for 循环更改预先写好的文本的颜色，具体取决于用户在提示时输入的内容。这是我的代码：

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

发生的情况是，只有在我完成所有提示后，文本才会显示。它显示了正确的颜色和文本以及所有内容，但在开始时“颜色为黑色。”没有显示，直到最后一个提示得到回答，什么都没有显示。

请注意，这是针对初学者的课程，因此任何比我这里更高级的东西都不会有太大帮助。我没有编写该函数，它是作为作业的一部分存在的。我已经研究了几个小时，但还是搞不清楚问题所在！

Answer 1

为此使用 SetInterval。

检查以下代码片段

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>

希望这有帮助