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：ヌル（...）のプロパティ 'style'を読み取れません。

この方法でjavascriptを使用して作成した要素の色を変更することはできません。なぜそうでないのか、そしてどのような方法を使用すべきですか？

私はidの値がalert（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

このエラーが発生した場合は、要素のstyleプロパティを呼び出すと、要素はnullになります。したがって、これは要素の色を変更しようとする方法とは関係ありません。 これはおそらく、documentオブジェクトに、getElementById()メソッドに提供するidの要素が含まれていないことを意味します。 がalertのConsoleに直接表示されているdocument.getElementById(id)に電話をしようとするとどうなりますか？

Answer 3

私はコメントから2つのソリューションを見つかった文字列あなたが実際に本物の要素を作成する場合は簡単に多くのことを行って、そしてないだろう：私はそれと第二を作った後に一つの要素を変更することでしたが1、私が使用したものは、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; 
}