Stil Array-Elemente Javascript

Question

Ich habe eine Reihe von Testergebnissen, die die Farbe rot sein müssen, wenn sie unter 70 Prozent sind, so habe ich ein Array und eine for-Schleife erstellt, um diejenigen aus diesem Array auszuwählen. Wenn ich jedoch versuche, diese Array-Elemente auf die Farbe Rot zu setzen, erhalte ich diesen Fehler. Ich bin ein bisschen neu in JS, also könnte es eine einfache Lösung sein.

Das Array funktioniert und es wird die Ergebnisse unter 70 im Konsolenprotokoll drucken, wenn ich sie jedoch nicht rot bekommen kann. Irgendwelche Ideen?

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> 

Die Funktion testgen wird von einem externen Skript aufgerufen.

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

Es gibt einen großen Fehler in Ihrem Code.

Wir haben eine Stileigenschaft für DOM-Elemente, nicht für eine Variable oder ein Array.

Wenn Sie schreiben wie folgt aus:

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

Ihr c ist ein Array-Element. Es ist nur ein einzelnes Element, das Sie für Addition/Subtraktion oder andere Operationen verwenden können.

Aber wenn man c.style verwenden, bedeutet es, ‚c‘ sollte wie

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

Bitte lesen Sie einmal über DOM-Elemente ein DOM-Element sein und wie CSS anzuwenden, der auf sich JS verwenden.

Für Ihren Fall, wenn Sie bestimmtes Element als rot möchten, können Sie Inline-CSS verwenden:

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

Answer 2

Wenn Sie c nehmen in

var c = scoresArray[i]; 

Es ist ein Array-Element, kein DOM Objekt. Sie können also keinen Stil dafür festlegen.

Da Sie an diesem extern geladenen Skript keine Änderungen vornehmen können (ich nehme an), gibt es eine Problemumgehung, um das zu erreichen, was Sie hier versuchen.

Sie können einfach die Punktzahl unter 70 in einem span-Tag einkapseln, wie folgt aus:

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

anstelle dieser beiden Linien (Entfernen):

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