如何更改使用javascript創建的元素的顏色

Question

我正在嘗試更改使用JavaScript創建的元素的顏色。 此元素中的信息是從數據庫中的數據填充的。

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;

當我刪除document.getElementById行並通過相應的分支運行時，代碼可以正常工作而不會出現語法錯誤。 當包含這些行時，出現語法錯誤：VM882：125 Uncaught TypeError：無法讀取null（…）的屬性'style'。

我不能以這種方式更改使用javascript創建的元素的顏色嗎？ 如果不是，為什么？我應該使用哪種方法。

我還用alert（id）檢查了id的值，它們很好。 兩者都是字符串，例如：“ 43”和“ 44”。 我也嘗試替換document.getElementById（id）.style.color =“ red”; 使用document.getElementById（“ 43”）。style.color =“ red”; 和我得到同樣的錯誤。 當我刪除線時，將使用正確的ID創建元素，但是當然我不能更改顏色。

Answer 1

您尚未將元素插入DOM中，因此無法使用getElementById獲得它。

如果您實際創建真正的元素，而不僅僅是字符串，這會容易得多

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

我從評論中發現了兩種解決方案：一種是在制作完元素后更改元素，第二種是我使用的一種方法是創建CSS類

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;

CSS：

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

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

Answer 3

如果收到此錯誤，則意味着當您嘗試在元素上調用屬性style時，該元素為null 。 因此，這與您嘗試更改元素顏色的方式無關。 這可能意味着您的document對象不包含具有您提供給getElementById()方法的id的元素。 嘗試直接在Console中使用alert顯示的id調用document.getElementById(id) ，會得到什么？