Question

我有一系列测试分数，如果它们低于70％，则需要为红色，所以我创建了一个数组和一个for循环来从这个数组中选择那些。但是当我尝试将这些数组元素设置为红色时，我得到了这个错误。我对JS有点新意，所以它可能很容易解决。

阵列有效，如果我不能让它们变成红色，它会在控制台日志中打印70以下的分数。有任何想法吗？

未捕获的TypeError：无法设置属性＆＃39; color＆＃39;未定义的在index.html：23

<script>
    var scoresArray = [84, 72, 56, 84, 0, 76, 72, 68, 70];
    for (var i = 0; i < scoresArray.length; i++) {
      if(scoresArray[i] < 70) {
        var c = scoresArray[i];
        c.style.color = "red";
      }
    }
    testgen(scoresArray);
</script>

从外部脚本调用函数testgen。

function testgen(scoresArray) {
  document.write("<li class=\"special\">");
  for (var i=0; i<scoresArray.length; i++) {
    document.write("<li>" + scoresArray[i] + "</li>");
  }
  document.write("</li>");
}

Answer 1

您的代码中存在一个很大的缺陷。

我们将DOM元素的样式属性赋予任何变量或数组。

当你这样写：

<script>
    var scoresArray = [84, 72, 56, 84, 0, 76, 72, 68, 70];
    for (var i = 0; i < scoresArray.length; i++) {
      if(scoresArray[i] < 70) {
        var c = scoresArray[i];
        c.style.color = "red";
      }
    }
    testgen(scoresArray);
</script>

你的c是一个数组元素。它只是一个可用于加/减或其他操作的元素。

但是当你使用c.style时，它意味着＆＃39; c＆＃39;应该是像

这样的DOM元素

this:
<div id="myElem">Hello</div>

请阅读一次关于DOM元素以及如何使用JS对它们应用CSS。

对于您的情况，如果您希望特定元素为红色，则可以使用内联CSS：

document.write("<li style='color:red'>" + scoresArray[i] + "</li>");

Answer 2

当您参加

时

var c = scoresArray[i];

它是一个数组元素，而不是DOM对象。所以你不能为此设置风格。

由于您无法对外部加载的脚本进行更改（我假设），因此有一种解决方法可以完成您在此处尝试执行的操作。

您可以简单地将分数封装在span标记中70以下，如下所示：

scoresArray[i] = '<span style="color:red">' + scoresArray[i] + '</span>';

取代这两行（删除）：

var c = scoresArray[i];
c.style.color = "red";

样式数组元素Javascript

2 个答案: