ESP8266(NodeMCU)传感器数据网页控制台出现innerHTML空对象错误求助

一、修复"Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')"错误 #

这个错误的核心原因是JavaScript代码尝试修改不存在的DOM元素，或者DOM未加载完成就执行了代码。按以下步骤排查修复：

1. 核对DOM元素ID与JS代码的一致性 #

检查Arduino生成的HTML页面中，是否存在JS代码里通过getElementById获取的所有元素。比如如果JS里写了document.getElementById("temp").innerHTML = ...，HTML里必须有对应的<span id="temp"></span>或<div id="temp"></div>，且ID拼写完全一致（区分大小写）。

2. 确保JS代码在DOM加载完成后执行 #

把更新页面的JS代码放到HTML的<body>标签末尾，或者用DOMContentLoaded事件包裹，避免DOM未就绪就执行代码：

document.addEventListener('DOMContentLoaded', function() {
  // 这里放原来的更新innerHTML的代码，比如：
  function updateData() {
    fetch("/api/data")
      .then(response => response.json())
      .then(data => {
        document.getElementById("temp").innerHTML = data.temperature + "°C";
        document.getElementById("hum").innerHTML = data.humidity + "%";
        document.getElementById("mq4").innerHTML = data.mq4;
      });
  }
  setInterval(updateData, 2000);
});

3. 检查Arduino代码的HTML模板输出 #

确认Arduino中生成HTML的字符串没有遗漏或写错元素ID，比如拼接HTML时是否正确输出了所有需要的ID标签。

二、实现传感器数据API接口 #

让ESP8266提供JSON格式的API，供其他服务器调用，步骤如下：

1. 封装传感器读取逻辑（可选但推荐） #

把读取DHT11和MQ4的代码封装成可复用的函数，避免重复代码：

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <DHT.h>

#define DHTPIN D4
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
ESP8266WebServer server(80);

// 定义传感器数据结构体
struct SensorData {
  float temperature;
  float humidity;
  int mq4;
};

// 读取传感器数据的函数
SensorData readAllSensors() {
  SensorData data;
  // 读取DHT11数据
  data.humidity = dht.readHumidity();
  data.temperature = dht.readTemperature();
  // 读取MQ4数据（假设接在A0引脚）
  data.mq4 = analogRead(A0);

  // 处理传感器读取失败的情况
  if (isnan(data.humidity)) data.humidity = -1.0;
  if (isnan(data.temperature)) data.temperature = -1.0;
  return data;
}

2. 添加API路由 #

在Arduino的服务器初始化代码中，添加/api/data路由，返回JSON格式的数据：

void setup() {
  dht.begin();
  WiFi.begin("SSID", "PASSWORD");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
  }

  // 网页路由（原有的网页展示逻辑）
  server.on("/", []() {
    SensorData data = readAllSensors();
    String html = "<!DOCTYPE html><html><body>";
    html += "<h1>传感器数据</h1>";
    html += "<p>温度: <span id='temp'>" + String(data.temperature) + "</span>°C</p>";
    html += "<p>湿度: <span id='hum'>" + String(data.humidity) + "</span>%</p>";
    html += "<p>MQ4气体值: <span id='mq4'>" + String(data.mq4) + "</span></p>";
    html += "<script>"
            "document.addEventListener('DOMContentLoaded', function() {"
            "  function updateData() {"
            "    fetch('/api/data')"
            "      .then(res => res.json())"
            "      .then(data => {"
            "        document.getElementById('temp').innerHTML = data.temperature;"
            "        document.getElementById('hum').innerHTML = data.humidity;"
            "        document.getElementById('mq4').innerHTML = data.mq4;"
            "      });"
            "  }"
            "  setInterval(updateData, 2000);"
            "});"
            "</script>";
    html += "</body></html>";
    server.send(200, "text/html", html);
  });

  // API路由
  server.on("/api/data", HTTP_GET, []() {
    SensorData data = readAllSensors();
    String json = "{";
    json += "\"temperature\":" + String(data.temperature) + ",";
    json += "\"humidity\":" + String(data.humidity) + ",";
    json += "\"mq4\":" + String(data.mq4);
    json += "}";
    server.send(200, "application/json", json);
  });

  server.begin();
}

void loop() {
  server.handleClient();
}

3. 测试API接口 #

其他服务器或客户端可以通过访问http://ESP8266_IP/api/data获取JSON数据，格式如下：

{"temperature":25.0,"humidity":60.0,"mq4":350}

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