スタイル配列要素Javascript

Question

私は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は、外部のスクリプトから呼び出されます。

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は1つの配列要素です。これは、加算/減算などの操作に使用できる単なる要素です。

しかし、もしあなたがc.styleを使用する場合、それはC 'は

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

のようなDOM要素なければならないことを意味し、DOM要素とどのようにJSを使用して、それらにCSSを適用するのに約一回読んでください。あなたは

var c = scoresArray[i]; 

にCを取るときには、配列の要素ではなく、DOMで

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

Answer 2

：あなたは赤などの特定の要素をしたい場合は、あなたのケースでは

は、あなたは、インラインCSSを使用することができますオブジェクト。だからあなたはそのスタイルを設定することはできません。

外部に読み込まれたスクリプトを変更することはできません（私が前提）。ここで何をしようとしているのかを回避する方法があります。

あなたは、単にこのように、spanタグで70以下のスコアをカプセル化することができます

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

次の2行（削除）の代わりに：

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