2017-05-04 82 views
1

我有一个测试分数的数组,如果它们在70%以下,那么它们的颜色应该是红色,所以我创建了一个数组和一个for循环来从这个数组中选择这些数。但是,当我尝试将这些数组元素设置为红色时,出现此错误。我对JS有点新,所以它可能是一个简单的修复。样式数组元素Javascript

该数组的作品,它会打印在控制台日志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>"); 
} 
+0

您正在尝试这样设置'c.style.color =“red”中的数字的CSS;''c'是数组中的一个数字。您只能设置元素的样式,而不能编号 – j08691

回答

2

你的代码有一个很大的缺陷。

我们将style属性改为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,它的意思是“C”应该像

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

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

对于你的情况,如果你想要特定元素为红色,您可以使用内联CSS:

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

它位于外部加载的脚本上。所以我猜他不能改变那部分代码。 – vishva8kumara

1

当你把下在

var c = scoresArray[i]; 

这是一个数组元素,而不是一个DOM目的。所以你不能为此设置风格。

由于您无法对该外部加载的脚本(我假设)进行更改,因此您可以使用一种解决方法来完成您在此处尝试执行的操作。

你可以简单地封装低于70的分数跨度标签,就像这样:

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

到位这两行(删除):

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