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创建的元素的颜色。如果不是为什么？，我应该使用什么方法。

我还检查了id与alert（id）的值是什么，它们没问题。两者都是字符串，例如：“43”和“44”。我也试过替换document.getElementById（id）.style.color =“red”; with 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

如果您收到此错误，则表示当您尝试在元素上调用属性WITH SortedRows AS ( SELECT ROW_NUMBER() OVER(ORDER BY ID) AS SortColumn ,* ,CASE WHEN val1 IS NULL THEN 0 ELSE 1 END +CASE WHEN val2 IS NULL THEN 0 ELSE 1 END +CASE WHEN val3 IS NULL THEN 0 ELSE 1 END AS CountOfValNotNull FROM @tbl ) SELECT tbl1.* FROM ( SELECT * FROM SortedRows UNION ALL SELECT 999999,0,'','','',(SELECT SUM(CountOfValNotNull) FROM SortedRows) ) AS tbl1 ORDER BY tbl1.SortColumn时，该元素为style。所以这与你试图改变元素颜色的方式无关。这可能意味着您的null对象不包含您为document方法提供的id元素。当您尝试使用getElementById()中document.getElementById(id)中显示的id来alert时，您会得到什么？

如何使用javascript

3 个答案: