2016-08-30 69 views
0

我有一个网站为JSON数据发出HTTP请求,然后回调函数处理数据并通过动态创建一系列div来显示它。我想要做的是等待该功能完成将div添加到页面,然后将标签仅应用于由以前的代码创建的特定div。如何在加载后更改动态创建的元素javascript

HTTP请求和回调

function data(callback){ 
    var url = //request url; 
    var request = new XMLHttpRequest(); 
     request.onreadystatechange = function() { 
      if (request.readyState === 4) { 
       if (request.status === 200) { 
        document.body.className = 'ok'; 
        //Parse returned string into an object, then pass the object to the callback function. 
        var data = JSON.parse(request.responseText); 
        callback(data); 
       } else { 
        document.body.className = 'error'; 
       } 
      } 
     }; 
    request.open("GET", url , true); 
    request.send(null); 
} 
function dataDisplay(data){ 
    //outputs <div id="1064" class="displayed-data"> 
        <p id="message1" class="hidden"></p> 
} 
data(dataDisplay); 

上面的代码显示我的数据正是我想要它,但是当我尝试访问我想改变的div的编号ID,函数运行在页面上显示数据之前,由于我尝试更改的数据尚未添加到DOM,导致“空”错误。

二功能改变原有

function label(){ 
    var message1 = document.createTextNode('//some label'); 
    var displayedData = document.getElementById('1064').getElementById('message1'); 
    displayedData.appendChild(message1); 
    document.getElementById('message1').classList.remove('hidden'); 
} 

我如何获得第二个功能要等到回调试图访问和更改之前完成?我在回调中尝试了一个回调,如:label(data(dataDisplay));,但它仍然抛出相同的错误,所以我显然做错了。对不起,我是JavaScript新手,并不知道从哪里开始。

感谢您的帮助!

回答

1

正确使用它的一个非常快速的方法就是使用这个内联函数。

data(function(result) { 
    dataDisplay(result); 
    label(); 
}); 

要知道,你的data功能本身很快就结束了 - 如果你需要从它的结果的东西,你需要将它列入回调。