Style array elements Javascript

Question

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

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
– j08691, Commented May 4, 2017 at 17:33

Nitesh · Accepted Answer · 2017-05-04 17:33:25Z

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

answered May 4, 2017 at 17:33

Nitesh

1,5151 gold badge13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vishva8kumara Over a year ago

It is on an externally loaded script. So I guess he cannot change that part of the code.

vishva8kumara · Accepted Answer · 2017-05-04 17:37:05Z

1

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 accomplish 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";

answered May 4, 2017 at 17:37

vishva8kumara

3551 gold badge3 silver badges16 bronze badges

Collectives™ on Stack Overflow

Style array elements Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related