Javascript getElementById，其中ID增加1

我正在制作一个网站，在这里我展示通过API收集的信息。我试图展示一个特定国家今天和明天的天气。但是，我收到通知，未捕获的TypeError:无法读取null的属性“getElementById”。所以我认为问题出在我试图提及的身份证上

在index.html中：

<div id="weather">
<div id="day1">
<div id="weatherIcon"></div>
<div id="weatherDescription"></div>
<div id="temp"></div>
<div id="humidity"></div>
<div id="speed"></div>
</div>
<div id="day2">
<div id="weatherIcon"></div>
<div id="weatherDescription"></div>
<div id="temp"></div>
<div id="humidity"></div>
<div id="speed"></div>
</div>
</div>

id="day_1_temp";
^^^ etc.

在JavaScript文件中：

                var openWeather = result.openWeather;
                document.getElementById("tempUnits").style.display = "block";
                document.getElementById("windUnits").style.display = "block";

                document.querySelector("#country_weather").innerText = "Weather in " + openCage.results[0].components.country;

                for (let i = 0; i < 1; i++) { 

                    const description = openWeather.daily[i].weather[0].description;
                    const temp = openWeather.daily[i].temp.day;
                    const humidity = openWeather.daily[i].humidity;
                    const speed = openWeather.daily[i].wind_speed;

                    document.getElementById(('day' + (i + 1))).getElementById('weatherIcon').attr('src', `http://openweathermap.org/img/wn/${openWeather.daily[i].weather[0].icon}@2x.png`);
                    document.getElementById(('day' + (i + 1))).getElementById('weatherDescription').html(description);
                    document.getElementById(('day' + (i + 1))).getElementById('temp').html(temp);
                    document.getElementById(('day' + (i + 1))).getElementById('humidity').html(humidity + "%");
                    document.getElementById(('day' + (i + 1))).getElementById('windSpeed').html(speed);
                }

var openWeather=result.openWeather；
document.getElementById（“tempUnits”）.style.display=“block”；
document.getElementById（“windUnits”）.style.display=“block”；
document.querySelector（“#country_weather”）.innerText=“weather in”+openCage.results[0].components.country；
对于（设i=0；i<1；i++）{
const description=openWeather.daily[i]。天气[0]。说明；
const temp=openWeather.daily[i].temp.day；
恒湿=开放天气。每日[i]。湿度；
恒速=开放天气。每日[i]。风速；
document.getElementById（（'day'+（i+1））.getElementById（'weatherIcon'）.attr（'src'）`http://openweathermap.org/img/wn/${openWeather.daily[i].weather[0].icon}@2x.png`）；
document.getElementById（（'day'+（i+1））.getElementById（'weatherDescription'）.html（description）；
document.getElementById（（'day'+（i+1））.getElementById（'temp'）.html（temp）；
document.getElementById（（'day'+（i+1））.getElementById（'湿度'）.html（湿度+“%”）；
document.getElementById（（'day'+（i+1））.getElementById（'windSpeed'）.html（速度）；
}

未捕获的TypeError:无法读取null的属性“getElementById”

这意味着您正在执行

null.getElementById

可能是其中一行（无论如何都是错误的）：

第一部分找不到任何HTML元素并返回

null

，然后第二部分尝试调用

null.getElementById

该行的问题是，

id

在DOM中必须是唯一的。不要在同一HTML文档中出现两次。因此，试图在HTML

.getElementById（'weatherIcon'）

的子组中查找

id

是没有意义的，因为它在整个文档中必须是唯一的

像

weatherIcon

这样的重复标识符应该是

class

es

let dayElem = document.getElementById(('day' + (i + 1)));

dayElem.getElementsByClassName('weatherIcon')[0].attr(...);
dayElem.getElementsByClassName('weatherDescription')[0].html(...);
dayElem.getElementsByClassName('temp')[0].html(temp);
...

---

这行代码不起作用，因为对于id为

day1

和

day2

的div，您的html文件中没有

，您应该在进一步查询之前检查元素是否存在。文档中的元素id必须是唯一的，所以在本文中我使用了

let days=3；
对于（假设i=1；i

---

每个页面的ID必须是唯一的，不能有同名的ID。如果存在同名的id，则getElementById函数将失败

您必须使用class属性

<div id="weather">
<div id="day1">
<div class="weatherIcon"></div>
<div class="weatherDescription"></div>
<div class="temp"></div>
<div class="humidity"></div>
<div class="speed"></div>
</div>
<div id="day2">
<div class="weatherIcon"></div>
<div class="weatherDescription"></div>
<div class="temp"></div>
<div class="humidity"></div>
<div class="speed"></div>
</div>
</div>

---

非常感谢你的帮助！！让我的工作有了新的视角，这真的很有帮助！最后，这是一个非常基本的错误。我有多个相同id的值（忘了你不能这么做-抱歉有点新手！）总之，我更改了我所有的id，如下所示：

在index.html中：

<div id="weather">
<div id="day1">
<div id="weatherIcon"></div>
<div id="weatherDescription"></div>
<div id="temp"></div>
<div id="humidity"></div>
<div id="speed"></div>
</div>
<div id="day2">
<div id="weatherIcon"></div>
<div id="weatherDescription"></div>
<div id="temp"></div>
<div id="humidity"></div>
<div id="speed"></div>
</div>
</div>

id="day_1_temp";
^^^ etc.

然后，在javascript中，如下所示：

for (let i = 0; i < 2; i++) { 

                    const description = openWeather.daily[i].weather[0].description;
                    const celsius_temp = (openWeather.daily[i].temp.day).toFixed(2);
                    const fahrenheit_temp = ((celsius_temp * 1.8) + 32).toFixed(2);
                    const speed_ms = (openWeather.daily[i].wind_speed).toFixed(2);
                    const speed_mph = (speed_ms * 2.237).toFixed(2);
                    const humidity = openWeather.daily[i].humidity;

                    document.querySelector('#tempUnits' + (i + 1)).style.display = "block";
                    document.querySelector('#windUnits' + (i + 1)).style.display = "block";
                    document.querySelector("#day_" + (i + 1) + "_icon").setAttribute('src', `http://openweathermap.org/img/wn/${openWeather.daily[i].weather[0].icon}@2x.png`);
                    document.querySelector("#day_" + (i + 1) + "_description").innerHTML = description;
                    document.querySelector("#day_" + (i + 1) + "_temp").style.display = "none";
                    document.querySelector("#day_" + (i + 1) + "_temp_celsius").style.display = "block";
                    document.querySelector("#day_" + (i + 1) + "_temp_celsius").innerHTML = celsius_temp;
                    document.querySelector("#day_" + (i + 1) + "_temp_fahrenheit").innerHTML = fahrenheit_temp;
                    document.querySelector("#day_" + (i + 1) + "_humidity").innerHTML = (humidity + " %");
                    document.querySelector("#day_" + (i + 1) + "_speed").style.display = "none";
                    document.querySelector("#day_" + (i + 1) + "_speed_ms").style.display = "block";
                    document.querySelector("#day_" + (i + 1) + "_speed_ms").innerHTML = speed_ms;
                    document.querySelector("#day_" + (i + 1) + "_speed_mph").innerHTML = speed_mph;
                }

for（设i=0；i<2；i++）{
const description=openWeather.daily[i]。天气[0]。说明；
恒定摄氏温度=（openWeather.daily[i].temp.day）.toFixed（2）；
恒定华氏温度=（摄氏温度*1.8）+32）；
恒速（2）；
恒速每小时=（速度每小时*2.237）。固定（2）；
恒湿=开放天气。每日[i]。湿度；
document.querySelector（'#tempUnits'+（i+1））.style.display=“block”；
document.querySelector（'#windUnits'+（i+1））.style.display=“block”；
document.querySelector（“#day_uu”+（i+1）+“icon”）.setAttribute（'src'`http://openweathermap.org/img/wn/${openWeather.daily[i].weather[0].icon}@2x.png`）；
document.querySelector（“#day_u“+（i+1）+”description”）.innerHTML=description；
document.querySelector（“#day_uzy”+（i+1）+“temp”）.style.display=“无”；
document.querySelector（“#day”+（i+1）+“_temp_concerties”）.style.display=“block”；
document.querySelector（“#day”+（i+1）+“_temp_centrics”）。innerHTML=centrics_temp；
document.querySelector（“#day”+（i+1）+“_temp_fahrenheit”）.innerHTML=fahrenheit_temp；
document.querySelector（“#day_uu”+（i+1）+“湿度”）。innerHTML=（湿度+“%”）；
document.querySelector（“#day_uzy”+（i+1）+“speed”）.style.display=“无”；
document.querySelector（“#day”+（i+1）+“_speed\u ms”）.style.display=“block”；
document.querySelector（“#day_uu”+（i+1）+“_speed_ms”）。innerHTML=speed_ms；
document.querySelector（“#day”+（i+1）+“_speed_mph”）。innerHTML=speed_mph；
}

你在说什么“主文件”

for (let i = 0; i < 2; i++) { 

                    const description = openWeather.daily[i].weather[0].description;
                    const celsius_temp = (openWeather.daily[i].temp.day).toFixed(2);
                    const fahrenheit_temp = ((celsius_temp * 1.8) + 32).toFixed(2);
                    const speed_ms = (openWeather.daily[i].wind_speed).toFixed(2);
                    const speed_mph = (speed_ms * 2.237).toFixed(2);
                    const humidity = openWeather.daily[i].humidity;

                    document.querySelector('#tempUnits' + (i + 1)).style.display = "block";
                    document.querySelector('#windUnits' + (i + 1)).style.display = "block";
                    document.querySelector("#day_" + (i + 1) + "_icon").setAttribute('src', `http://openweathermap.org/img/wn/${openWeather.daily[i].weather[0].icon}@2x.png`);
                    document.querySelector("#day_" + (i + 1) + "_description").innerHTML = description;
                    document.querySelector("#day_" + (i + 1) + "_temp").style.display = "none";
                    document.querySelector("#day_" + (i + 1) + "_temp_celsius").style.display = "block";
                    document.querySelector("#day_" + (i + 1) + "_temp_celsius").innerHTML = celsius_temp;
                    document.querySelector("#day_" + (i + 1) + "_temp_fahrenheit").innerHTML = fahrenheit_temp;
                    document.querySelector("#day_" + (i + 1) + "_humidity").innerHTML = (humidity + " %");
                    document.querySelector("#day_" + (i + 1) + "_speed").style.display = "none";
                    document.querySelector("#day_" + (i + 1) + "_speed_ms").style.display = "block";
                    document.querySelector("#day_" + (i + 1) + "_speed_ms").innerHTML = speed_ms;
                    document.querySelector("#day_" + (i + 1) + "_speed_mph").innerHTML = speed_mph;
                }