Javascript 未捕获类型错误：无法读取属性'；风格'；空的

我有一个从XML文件中读取协调的函数，当它在窗口中松散时，该函数可以正常工作。但是当我把它放在一个函数中时，我得到了错误<代码>无法读取第127行的null属性“style”。

第127排是

document.getElementById(id).style.top=Ynod;

有什么想法吗

var main = (function () {

    var id=Math.floor((Math.random()*1000000)+1);


    document.getElementById("add-new-sticker-btn").addEventListener("click", function(){
        id += 1;
        console.log(id);
        add_sticker(""); /**"" removes undefined "*/

        var xmlhttp;
        xmlhttp=new XMLHttpRequest();
        xmlhttp.open("POST","/project2/php/insert.php",true); /*Search way... JS to javaScript*/
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("textBoxID="+id);
    });


    function run() {
        readXml();
    }

    function readXml() {
        var xmlhttp;
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("get", 'xml/stickers.xml', false);
        xmlhttp.send();
        var myXML = xmlhttp.responseXML;
        stickers = myXML.getElementsByTagName("sticker");

        for (i = 0; i < stickers.length; i++) {
            var idNod = (stickers[i].getElementsByTagName("id")[0].childNodes[0].nodeValue); /*Get the ID*/
            var id = idNod;
            var textNod = (stickers[i].getElementsByTagName("text")[0].childNodes[0].nodeValue); /* Text*/
            add_sticker(textNod); /*Call creator function*/

            var Xnod = (stickers[i].getElementsByTagName("x")[0].childNodes[0].nodeValue) + 'px'; /*Get the x position Add PX for pixel*/
            var Ynod = (stickers[i].getElementsByTagName("y")[0].childNodes[0].nodeValue) + 'px'; /*Get the y position*/
            var Znod = (stickers[i].getElementsByTagName("z")[0].childNodes[0].nodeValue); /*Get the y position*/
            console.log(Ynod) // Gives correct Y and X
            console.log(Xnod)

            document.getElementById(id).style.top = Ynod;
            document.getElementById(id).style.left = Xnod;
            document.getElementById(id).style.zIndex = Znod;
        }
    }

    window.addEventListener("load", run);
    return {};
}());

var main=（函数（）{
var id=Math.floor（（Math.random（）*1000000）+1）；
document.getElementById（“添加新标签btn”）.addEventListener（“单击”，函数（）{
id+=1；
console.log（id）；
添加标签（“”；/**“删除未定义的”*/
var-xmlhttp；
xmlhttp=新的XMLHttpRequest（）；
open（“POST”，“/project2/php/insert.php”，true）；/*搜索方式…JS到javaScript*/
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
xmlhttp.send（“textBoxID=“+id”）；
});
函数运行（）{
readXml（）；
}
函数readXml（）{
var-xmlhttp；
xmlhttp=新的XMLHttpRequest（）；
open（“get”，'xml/stickers.xml'，false）；
xmlhttp.send（）；
var myXML=xmlhttp.responseXML；
贴纸=myXML.getElementsByTagName（“贴纸”）；
对于（i=0；i

idNod未定义，请确保贴纸中有元素，然后尝试打印贴纸[i]。getElementsByTagName（“id”）[0]。将childNodes打印到控制台。

Okej我自己发现了问题。 我调用了一个全局变量var

id=idNod；

如果我将

var id=idNod；

更改为仅

id=idNod

---

一切正常：）

这意味着

document.getElementById（id）

找不到指定了

id

@VisioN的元素，但我把id元素放在了应该放的地方？或者我说它错了？。设置断点，一步一步地执行代码步骤，确保每个变量都有您期望的值。错误消息很清楚，但由于我们无法运行代码或知道数据，因此我们不能说太多。你怎么知道它是未定义的？？它可能是任何东西。@JimCresswell它不是未定义的，因为我在om console.logging它时得到了相应的ID值。你说得很好，很抱歉没有仔细阅读。如果ID是正确的，那么我猜元素当时不在DOM中，正如@FelixKling所说，调试是前进的方向。很抱歉没有变得更有用。@JimCresswell np。解释不是我的强项：）我会尝试调试代码，但不知怎么的，一切看起来都很好：(