set property 'backgroundColor' of undefined at colors

Question

I need to use class="side1" from the custList because that is the side of the cube I want to flash a different color everytime a certain time passes. The only way I found that it works is if I use a setInterval but I don't want it to just keep changing colors every so many seconds. If the cube as been sitting there for 5min it will go from green to yellow and if it's been there for 7min it will go to red and stay red until it's done and then disappears. What can I do to make it work?

<div id="loader"></div>
<div style="display: none;" id="myDiv" class="animate-bottom">
    <%--The routing cube--%>
    <div id="wrapD3Cube" class="normal"></div>
</div>

var custList = "";
        var top = 0;
        var left = 0;
        for (var i = 0; i < Data.length; i++) {

            custList += '<div class="D3Cube" id="D3Cube"' + i + '>';
            custList += '<div class="side1" id="side1' + i + '" 
style="position:absolute;  opacity: 1.05;  width: 112px; height: 112px;"> 
</div > ';. 

var changeColor = 0
    function colors()  {

        if (changeColor < 4000) {
            document.getElementsByClassName("side1").style.backgroundColor 
 = '#91CB8A';


        }
        else if (changeColor >= 5000) {
            document.getElementsByClassName("side1").style.backgroundColor 
= '#F7B448';


        }
        else if (changeColor >= 6000) {
            document.getElementsByClassName("side1").style.backgroundColor 
= '#E84F60';

        }

    }
    colors();

Possible duplicate of [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Sebastian Simon, Nov 20 '19 at 19:56
@SebastianSimon It has to be getElementsByClassName because the boxes have id=side1 and it's multi boxes with diff side#. So changing it to getElementsById doesn't help. — , Nov 20 '19 at 20:06
There are 10 answers in the linked question. Most of them tell you how to deal with `HTMLCollection`s and `NodeList`s. — Sebastian Simon, Nov 20 '19 at 20:14
Then your question is currently not answerable. Provide more context. Make a [mre]. See [How to create Stack Snippets](https://meta.stackoverflow.com/q/358992/4642212). If none of these _ten_ answers helped, you’re obviously doing something wrong that you’re not telling us. — Sebastian Simon, Nov 20 '19 at 22:36
By the way, are you sure your `if` conditions are correct? You’re aware that nothing will happen if `changeColor >= 4000 && changeColor < 5000`? — Sebastian Simon, Nov 20 '19 at 23:08
@SebastianSimon I updated my code and gave a bit more detail to see if it's understandable now. — , Nov 21 '19 at 00:25
There appear to be no `.side1` elements in your DOM. Where is the string `custList` actually used? `document` methods only operate on the current DOM, not on any random JS variables like strings. — Sebastian Simon, Nov 21 '19 at 09:06
@SebastianSimon custList comes from a query. Each side of the cube will have info from each customer. Side2 is Data[i].Customer, Side3 is Data[i].Agent and so on. The top part is the one that would flash when the customer application has been waiting in queue for too long. document.getElementById("container" + i).innerHTML = custList; I didn't put all of my code here because I didn't think it was necessary since I'm looking for a way to make it change colors. — , Nov 21 '19 at 14:42
_`document.getElementById("container" + i).innerHTML = custList;`_ — this happens after `colors();`? Then reread my last comment. _“I didn't put all of my code here because I didn't think it was necessary since I'm looking for a way to make it change colors”_ — then reread my third comment. — Sebastian Simon, Nov 21 '19 at 20:59
Glad you figured it out, but you have to understand that your question was too incomplete most of the time. Currently, it’s still not clear at what point `custList` is included in the DOM or when and where your `.side1` elements exist in the DOM. The question still lacks a [mre]. The error message in your title _Uncaught `TypeError`: cannot set property '`backgroundColor`' of `undefined` at `colors`_ — in its complete form — is _directly caused_ by `document.getElementsByClassName` not returning elements, which is exactly what the linked question explains, including how to deal with this. — Sebastian Simon, Nov 22 '19 at 18:13

score 0 · Accepted Answer · edited Nov 20 '19 at 20:15

0

The function document.getElementsByClassName returns an HTMLCollection, so you have to choose an element:

document.getElementsByClassName("side1")[0].style.backgroundColor = "color";

edited Nov 20 '19 at 20:15

Sebastian Simon

18,263
7
55
75

answered Nov 20 '19 at 19:57

Alberto Sinigaglia

12,097
2
20
48

set property 'backgroundColor' of undefined at colors

1 Answers1