I have an array of test scores that need to be the color red if they are under a 70 percent so I created an array and a for loop to pick those out of this array. However when I try to set those array elements to the color red I get this error. I am a bit new to JS so it could be an easy fix.

The array works and it will print the scores under 70 in the console log if however I can not get them to be red. Any ideas?

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>

The function testgen is called from an external script.

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>");
}

I have an array of test scores that need to be the color red if they are under a 70 percent so I created an array and a for loop to pick those out of this array. However when I try to set those array elements to the color red I get this error. I am a bit new to JS so it could be an easy fix.

The array works and it will print the scores under 70 in the console log if however I can not get them to be red. Any ideas?

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>

The function testgen is called from an external script.

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>");
}

• javascript

• You're attempting so set the CSS of a number in c.style.color = "red"; where c is a number in your array. You can only set the style of an element, not a number – j08691 Commented May 4, 2017 at 17:33

2 Answers 2

There is a big big flaw in your code.

We have style property to DOM elements not to any variable or array.

When you write like this:

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

Your c is one array element. It is just a single element that you can use for addition/subtraction or other operations.

But when you use c.style, it means 'c' should be a DOM element like

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

Please read once about DOM elements and how to apply CSS on them using JS.

For your case, if you want particular element as red, you can use inline CSS:

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

When you take c in

var c = scoresArray[i];

It is an array element, not a DOM object. So you cannot set style for that.

Since you cannot make changes to that externally loaded script (I assume), there is a workaround to acplish what you are trying to do here.

You can simply encapsulate the score below 70 in a span tag, like this:

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

in place of these two lines (remove):

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