如何用JavaScript根据温度条件修改背景色？代码temp值未定义求助

针对你遇到的问题，逐个分析并给出修正方案：

第一段代码的核心问题 #

1. data.main.temp 输出undefined：说明传入的data对象里没有main.temp这个属性。先在函数开头打印完整data确认结构：

   colorChange: function(data) {
       console.log('完整data对象:', data); // 查看data真实结构
       // ... 后续代码
   }
   

   如果是调用天气API返回的数据，要确认API请求是否成功，或是是否存在拼写错误（部分API字段可能是main.temperature而非temp）。

2. document.querySelector(data.main.temp) 逻辑错误：querySelector的参数是CSS选择器（比如#temp、.temperature），不是温度数值。直接使用data.main.temp的值即可，无需通过DOM查询。

3. this.displayWeather(...) 用途冗余：如果这个方法是处理温度显示的，不需要将其返回值赋值给tempColor，直接用data.main.temp作为判断依据即可。

第二段代码的核心问题 #

1. temp变量未定义：直接使用temp.innerText会抛出未定义错误，必须先通过选择器获取对应DOM元素：

   const tempElement = document.getElementById('temp'); // 假设温度元素的id为temp
   const temp = parseFloat(tempElement.innerText); // 将文本转为数字类型
   

2. 字符串与数字比较的类型问题：innerText返回的是字符串，直接和数字比较会导致逻辑错误，必须用parseFloat()或parseInt()转为数字后再判断。

修正后的代码示例 #

情况1：从API数据获取温度 #

colorChange: function(data) {
    // 先确认数据存在
    if (!data?.main?.temp) {
        console.log('温度数据不存在');
        return;
    }
    const temp = parseFloat(data.main.temp);
    if (temp <= 10) {
        document.body.style.backgroundColor = "lightgrey";
    } else if (temp >= 11 && temp < 20) {
        document.body.style.backgroundColor = "lightblue";
    } else {
        document.body.style.backgroundColor = "lightcoral";
    }
}

情况2：从页面DOM元素获取温度 #

colorChange: function() {
    const tempElement = document.querySelector('#temp'); // 根据实际元素选择器修改
    if (!tempElement) {
        console.log('未找到温度元素');
        return;
    }
    const temp = parseFloat(tempElement.innerText);
    // 处理温度格式错误的情况
    if (isNaN(temp)) {
        console.log('温度格式错误');
        return;
    }
    if (temp <= 10) {
        document.body.style.backgroundColor = "lightgrey";
    } else if (temp >= 11 && temp < 20) {
        document.body.style.backgroundColor = "lightblue";
    } else {
        document.body.style.backgroundColor = "lightcoral";
    }
}

额外注意事项 #

• 如果是API请求，要确保请求异步完成后再调用colorChange函数，避免数据未返回就执行逻辑。
• 温度值可能带小数，用parseFloat比parseInt更适配实际场景。

内容的提问来源于stack exchange，提问作者niacode