How can I change the colour of an element I have created using javascript

Question

I am trying to change the colour of an element I have created using JavaScript. The information in this element is populated from data in a database.

var done = orders[i][2]; 
var id = orders[i][0];
id_and_name = JSON.stringify(id_and_name);
content = content + "<div onClick='loadOrder("+id_and_name+")' class='btn btn-lg btn-info' 
id= '"+id+"'><span class='glyphicon glyphicon-shopping-cart'></span> 
ID: "+orders[i][0]+"</br>Name: " + orders[i][1]+"</div>";
    if (done == 0){
        alert("order not done");
        document.getElementById(id).style.color = "red";
        alert(id);
    }else{
        alert("order done");
        document.getElementById(id).style.color = "green";
        alert(id);
    }

document.getElementById("main_content").innerHTML = content;

The code works without syntax errors when I remove the document.getElementById lines and runs through the appropriate branch. When I include these lines, I get a syntax error : VM882:125 Uncaught TypeError: Cannot read property 'style' of null(…).

Can I not change the colour of elements that I have created using javascript in this way. If not why?, and what method should I be using.

I have also checked what the value of id is with alert(id) and they are fine. Both are strings eg: "43" and "44". I have also tried to replace document.getElementById(id).style.color = "red"; with document.getElementById("43").style.color = "red"; and I get the same error. When I remove the line the elements are created with the correct ID but of course i cannot change the colour then.

Answer 1

You have not inserted the element into the DOM yet, and as such you can't get it with getElementById .

This would go a lot easier if you actually create real elements, and not just strings

var done  = orders[i][2];
var id    = orders[i][0];
var id_and_name = JSON.stringify(id_and_name);
var div   = document.createElement('div');
var span  = document.createElement('span');
var text1 = document.createTextNode('ID: ' + orders[i][0]);
var text2 = document.createTextNode('Name: ' + orders[i][1]);
var br    = document.createElement('br');
var main  = document.getElementById("main_content");

div.className = 'btn btn-lg btn-info';
div.id = id;
div.addEventListener('click', function() {
    loadOrder(id_and_name);
},false);

span.className = 'glyphicon glyphicon-shopping-cart';

if (done == 0) {
    div.style.color = "red";
} else {
    div.style.color = "green";
}

// later, insert the elements in the DOM

main.appendChild(div);
main.appendChild(span);
main.appendChild(text1);
main.appendChild(br);
main.appendChild(text2);

Answer 2

I found 2 solutions from the comments: One was to change the element after I had made it and the second one, the one I used, was to create CSS classes

var done = orders[i][2]; 
var id = orders[i][0];
id_and_name = JSON.stringify(id_and_name);
var button_colour = "red_background";
if (done == 1){
    button_colour = "green_background";
}

content = content + "<div onClick='loadOrder("+id_and_name+")' 
class='btn btn-lg btn-info "+button_colour+"' id= '"+id+"'><span class='glyphicon glyphicon-shopping-cart'></span> ID: "+orders[i][0]+"</br>Name: " + 
orders[i][1]+"</div>";
    document.getElementById("main_content").innerHTML = content;

The CSS:

.green_background{
    background-color: green;
    outline-color:black;
}

.red_background{
    background-color: red;
    outline-color:black;
}

Answer 3

If you get this error, this means that when you try to call the property style on your element, the element is null . So this has nothing to do with the way you are trying to change the element's color. This probably means that your document object doesn't contain an element with the id you provide to the getElementById() method. What do you get when you try to call document.getElementById(id) with the id shown in the alert directly in the Console ?