Question

样式数组元素 Javascript

2017-05-04

18815

javascript

我有一个测试分数数组，如果分数低于 70%，则需要将其显示为红色，因此我创建了一个数组和一个 for 循环来从该数组中挑选出这些分数。但是，当我尝试将这些数组元素设置为红色时，我收到此错误。我对 JS 有点陌生，所以这可能是一个简单的修复。

数组可以正常工作，并且它会在控制台日志中打印低于 70 的分数，但是如果我无法将它们设置为红色。有什么想法吗？

Uncaught TypeError: Cannot set property 'color' of undefined at 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 元素具有 style 属性，而不是任何变量或数组。

当您这样写时：

<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 时，它意味着“c”应该是一个 DOM 元素，如

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

请阅读一次有关 DOM 元素以及如何使用 JS 在其上应用 CSS。

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

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

Answer 2

当您将 c 放入

var c = scoresArray[i];

时，它是一个数组元素，而不是 DOM 对象。因此您无法为其设置样式。

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

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

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

代替这两行（删除）：

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