Question

我一直收到错误＆＃34;无法设置.innerHTML为null＆＃34;。我也试过在最后一个body标签之前链接脚本。我一直使用双引号，一切拼写正确，脚本运行。我注意到weatherBox div中的两个div仍然没有加载。他们不会出现在开发工具中。

我可以将温度值注入weatherBox div，然后显示出来。但那不是我想要的地方。

HTML：

<p>Stuff should load here:</p>
<div id="weatherBox">
    <div id="current"></div>
    <div id="forecast"></div>
</div>

JS：

window.onload = function() {
var myRequest = new XMLHttpRequest();
myRequest.onreadystatechange = function(){
    if(myRequest.readyState === 4){
        if(myRequest.status ===200){
        document.getElementById("weatherBox").innerHTML = "load success. see console.";
        var weather = JSON.parse(myRequest.responseText);
        console.log(weather);
        document.getElementById("current").innerHTML = weather.current_observation.feelslike_f;

        } 
    }
};

myRequest.open("GET", "http://api.wunderground.com/api/ceb5d155ada684a6/forecast/geolookup/conditions/q/WI/Oshkosh.json");

myRequest.send();
};

Answer 1

问题是，当您在innerHTML上设置<div id="weatherBox">时，您将完全替换内容。

document.getElementById("weatherBox").innerHTML = "load success. see console.";

<div id="current"></div>元素已从<div id="weatherBox">中删除。

<div id="weatherBox">
    <div id="current"></div>
    <div id="forecast"></div>
</div>

然后当你在删除它后尝试访问该元素时，它会失败。

document.getElementById("current").innerHTML = weather.current_observation.feelslike_f;

Answer 2

您通过设置#weatherBox的innerHTML删除了#current！哦，男孩......

Ack，被击败了。

即使在DOM加载后也无法设置.innerHTML为null

2 个答案: