Getting the error: "Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at xhttp.onreadystatechange" after getting output once
I am fetching data (temperature, humidity and gas) from sensor (DHT11 and MQ4) using ESP8266 (NodeMCU) and show them in the website, everything works fine in the view but when I go to console I see this error:
"(index):18 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
at xhttp.onreadystatechange ((index):18:56)
xhttp.onreadystatechange @ (index):18
XMLHttpRequest.send (async)
updateData @ (index):24
setInterval (async)
(anonymous) @ (index):26 "
Here is the Arduino IDE code that I am using:
include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "DHTesp.h"
#define DHTpin 14 //D5 of NodeMCU is GPIO14
DHTesp dht;
const char* ssid = "Tasnim"; // Enter SSID here
const char* password = "peara2304"; // Enter Password here
ESP8266WebServer server(80);
// MQ-4 Gas Sensor
uint8_t MQ4Pin = A0;
float Temperature = dht.getTemperature();
float Humidity = dht.getHumidity();
float GasValue = analogRead(MQ4Pin);
void setup() {
Serial.begin(115200);
delay(10);
dht.setup(DHTpin, DHTesp::DHT11);
pinMode(MQ4Pin, INPUT);
Serial.println("Connecting to ");
Serial.println(ssid);
// Connect to your local Wi-Fi network
WiFi.begin(ssid, password);
// Check Wi-Fi connection
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: ");
Serial.println(WiFi.localIP());
server.on("/", HTTP_GET, handle_OnConnect);
server.on("/data", HTTP_GET, handle_Data);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
}
void handle_OnConnect() {
float Temperature = dht.getTemperature();
float Humidity = dht.getHumidity();
float GasValue = analogRead(MQ4Pin);
server.send(200, "text/html", SendHTML(Temperature, Humidity, GasValue));
}
void handle_Data() {
String data = "{\"temperature\":" + String(Temperature) +
",\"humidity\":" + String(Humidity) +
",\"gasValue\":" + String(GasValue) + "}";
server.send(200, "application/json", data);
}
void handle_NotFound() {
server.send(404, "text/plain", "Not found");
}
String SendHTML(float Temperaturestat, float Humiditystat, float GasValueStat) {
String ptr = "<!DOCTYPE html> <html>\n";
ptr += "<head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr += "<title>ESP8266 Weather and Gas Report</title>\n";
ptr += "</head>\n";
ptr += "<body>\n";
ptr += "<div id=\"webpage\">\n";
ptr += "<h1>ESP8266 NodeMCU Weather and Gas Report</h1>\n";
ptr += "<p>Temperature: " + String(Temperaturestat) + "°C</p>\n";
ptr += "<p>Humidity: " + String(Humiditystat) + "%</p>\n";
ptr += "<p>Gas Value: " + String(GasValueStat) + "</p>\n";
ptr += "</div>\n";
ptr += "<script>\n";
ptr += "function updateData() {\n";
ptr += " var xhttp = new XMLHttpRequest();\n";
ptr += " xhttp.onreadystatechange = function() {\n";
ptr += " if (this.readyState == 4 && this.status == 200) {\n";
ptr += " var data = JSON.parse(this.responseText);\n";
ptr += " document.getElementById('temperature').innerHTML = 'Temperature: ' + data.temperature + '°C';\n";
ptr += " document.getElementById('humidity').innerHTML = 'Humidity: ' + data.humidity + '%';\n";
ptr += " document.getElementById('gasValue').innerHTML = 'Gas Value: ' + data.gasValue;\n";
ptr += " }\n";
ptr += " };\n";
ptr += " xhttp.open('GET', '/data', true);\n";
ptr += " xhttp.send();\n";
ptr += "}\n";
ptr += "setInterval(updateData, 1000);\n";
ptr += "function autoRefresh(){";
ptr += "window.location = window.location.href;";
ptr += "}\n";
ptr += "setInterval('autoRefresh()',100000)";
ptr += "</script>\n";
ptr += "</body>\n";
ptr += "</html>\n";
return ptr;
}
I am trying to fetch data as API to be called using another server, so the data on the console is needed for me. Please do help me out, I am a beginner in this works.
Solution
Found out the errors:
Forgot to put the ID inside the html for the JS to make changes:
ptr += " document.getElementById('Temperature').innerHTML = 'Temperature: ' + data.Temperature + '°C';\n"; ptr += " document.getElementById('Humidity').innerHTML = 'Humidity: ' + data.Humidity + '%';\n"; ptr += " document.getElementById('gasValue').innerHTML = 'Gas Value: ' + data.gasValue;\n";The sensor readings were declared globally, and their values were only updated once during the setup, resulting in static values being sent repeatedly without updating, changing the function:
void handle_Data() { float Temperature = dht.getTemperature(); float Humidity = dht.getHumidity(); float GasValue = analogRead(MQ4Pin);
String data = "{\"Temperature\":" + String(Temperature) + ",\"Humidity\":" + String(Humidity) + ",\"gasValue\":" + String(GasValue) + "}"; server.send(200, "application/json", data);}
Replacing these codes solves the problem.
The full working code (After updates):
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "DHTesp.h"
#define DHTpin 14 //D5 of NodeMCU is GPIO14
DHTesp dht;
// Uncomment one of the lines below for whatever DHT sensor type you're using!
//#define DHTTYPE DHT21 // DHT 21 (AM2301)
//#define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321
/* Put your SSID & Password */
const char* ssid = "Tasnim"; // Enter SSID here
const char* password = "peara2304"; // Enter Password here
ESP8266WebServer server(80);
// MQ-4 Gas Sensor
uint8_t MQ4Pin = A0;
float Temperature = dht.getTemperature(); // Gets the values of the temperature
float Humidity = dht.getHumidity(); // Gets the values of the humidity
float GasValue = analogRead(MQ4Pin); // Gets the values of the gas sensor
void setup() {
Serial.begin(115200);
delay(10);
dht.setup(DHTpin, DHTesp::DHT11);
pinMode(MQ4Pin, INPUT);
Serial.println("Connecting to ");
Serial.println(ssid);
// Connect to your local Wi-Fi network
WiFi.begin(ssid, password);
// Check Wi-Fi connection
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: ");
Serial.println(WiFi.localIP());
server.on("/", HTTP_GET, handle_OnConnect);
server.on("/data", HTTP_GET, handle_Data);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
}
void handle_OnConnect() {
float Temperature = dht.getTemperature();
float Humidity = dht.getHumidity();
float GasValue = analogRead(MQ4Pin);
server.send(200, "text/html", SendHTML(Temperature, Humidity, GasValue));
}
void handle_Data() {
float Temperature = dht.getTemperature();
float Humidity = dht.getHumidity();
float GasValue = analogRead(MQ4Pin);
String data = "{\"Temperature\":" + String(Temperature) +
",\"Humidity\":" + String(Humidity) +
",\"gasValue\":" + String(GasValue) + "}";
server.send(200, "application/json", data);
}
void handle_NotFound() {
server.send(404, "text/plain", "Not found");
}
String SendHTML(float Temperaturestat, float Humiditystat, float GasValueStat) {
String ptr = "<!DOCTYPE html> <html>\n";
ptr += "<head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr += "<title>ESP8266 Weather and Gas Report</title>\n";
ptr += "</head>\n";
ptr += "<body>\n";
ptr += "<div id=\"webpage\">\n";
ptr += "<h1>ESP8266 NodeMCU Weather and Gas Report</h1>\n";
ptr += "<p id='Temperature'>Temperature: " + String(Temperaturestat) + "°C</p>\n";
ptr += "<p id='Humidity'>Humidity: " + String(Humiditystat) + "%</p>\n";
ptr += "<p id='gasValue'>Gas Value: " + String(GasValueStat) + "</p>\n";
ptr += "</div>\n";
ptr += "<script>\n";
ptr += "function updateData() {\n";
ptr += " var xhttp = new XMLHttpRequest();\n";
ptr += " xhttp.onreadystatechange = function() {\n";
ptr += " if (this.readyState == 4 && this.status == 200) {\n";
ptr += " var data = JSON.parse(this.responseText);\n";
ptr += " document.getElementById('Temperature').innerHTML = 'Temperature: ' + data.Temperature + '°C';\n";
ptr += " document.getElementById('Humidity').innerHTML = 'Humidity: ' + data.Humidity + '%';\n";
ptr += " document.getElementById('gasValue').innerHTML = 'Gas Value: ' + data.gasValue;\n";
ptr += " }\n";
ptr += " };\n";
ptr += " xhttp.open('GET', '/data', true);\n";
ptr += " xhttp.send();\n";
ptr += "}\n";
ptr += "setInterval(updateData, 1000);\n";
ptr += "function autoRefresh(){";
ptr += "window.location = window.location.href;";
ptr += "}\n";
ptr += "setInterval('autoRefresh()',100000)";
ptr += "</script>\n";
ptr += "</body>\n";
ptr += "</html>\n";
return ptr;
}
- How to fix Lambda function timeout when interacting with DynamoDB using AWS SDK v3 in Node.js?
- Count of duplicate console.log() resets when called from a different element
- createStore is @deprecated so im trying to replace with configurationStore
- finding a point and its angle on a cubic Bezier curve in JavaScript
- Count cell values only if another condition is met
- Understanding unique keys for array children in React.js
- What are the requirements for audio output in Chrome on Android?
- How to submit an ASP.NET Core Razor Pages form without reloading the page
- How do I fix CORS issue in Fetch API
- Why isn't it good non-compile scripting languages to use for intensive calculations?
- Send Sendgrid Email Without Subject
- How to remove required to an element using jQuery?
- How to format numbers as currency strings
- Trouble using require(); Needing to convert JS file to ES module
- I keep getting Exception: Invalid argument: replacement on a google Apps Script
- Append element as sibling after element?
- Why doesn't npm update install the latest nodemon version?
- Ellipsis in the middle of a text (Mac style)
- Finding all elements with a scroll
- How to get the mouse position relative to the window viewport in javascript?
- jQuery on click to check if it has a div with a certain class and then change the value of a different class
- Firebase deploy error: Neither apiKey nor config.authenticator provided (using Stripe)
- Detecting which input is focused React hooks
- How can I find out if a javascript iterator terminates early?
- Vuetify3 autocomplete with per-item tooltips not clickable
- Renaming Function Parameters with Babel Without Changing Other Identical Identifiers
- How to find npm duplicate packages?
- Color gradient as style on marker
- How to fill the whole canvas with specific color?
- Change onclick action with a Javascript function