0

i am trying to get rid of this error in a webpage served by an ESP32:

Cannot read properties of null (reading 'getElementsByTagName')

the full error looks like that:

(index):360 Uncaught TypeError: Cannot read properties of null (reading 'getElementsByTagName')
    at XMLHttpRequest.response ((index):360:28)
response    @   (index):360
XMLHttpRequest.send (async)     
process @   (index):404
(anonymous) @   VM193:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM191:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM190:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM189:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM188:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM187:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM186:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM185:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM184:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM182:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM181:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM180:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM179:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM178:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM177:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM176:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM175:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM174:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM173:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM172:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM170:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM169:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM168:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM167:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM166:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM165:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM164:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM159:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM154:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM149:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM144:1
setTimeout (async)      
process @   (index):408
(anonymous) @   VM138:1

the Page works like expected, but i am very irritated by these thousands of errors occuring in the console log. as far as i understand the problem, it means that i am trying to find an object before it is actually rendered. - but that seems to be wrong - the page works?!

i really dont get the issue here. maybe someone can point me in the right direction where to look to solve this problem?

Thank you so much!!

Here is the full webpage:

<!DOCTYPE html>
<html lang="en" class="js-focus-visible">
  <title>Tacho / Odometer</title>

  <style>
    body,
    html {
      height: 100%;
    }

    table {

      width: 100%;
      border-spacing: 0px;
    }

    td {
      height: 20px;
      padding: 3px 15px;
    }
    .btn {
      background-color: #444444;
      border: none;
      
      color: white;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }
    .category {
      font-family: "Verdana", "Arial", sans-serif;
      font-weight: bold;
      font-size: 28px;
      line-height: 50px;
      padding: 20px 10px 0px 10px;
      color: #000000;
    }
    .valueSmall {
      font-family: "Verdana", "Arial", sans-serif;
      font-weight: bold;
      font-size: 40px;
      line-height: 50px;
      padding: 20px 10px 0px 10px;
      color: #000000;
    }
    .valueBig {
      font-family: "Verdana", "Arial", sans-serif;
      font-weight: bold;
      font-size: 100px;
      line-height: 150px;
      padding: 20px 10px 0px 10px;
      color: #000000;
    }

  </style>


  <body style="background-color: #efefef" onload="process()">

    <div style="height: 100%" class="fullscreen">
      <table>
        <tr>
          <td>
            <table border=5 bordercolor = red>
                <tr>
                  <td>
                <div class="valueSmall" id="time">    Uhrzeit </div>
                <div class="valueSmall" id="date">    Date</div>
                <div class="valueSmall" id="position">    Position</div>
            
           
                    

                  </td>
                </tr>
                <tr>
                  <td>
                    <table border=5 bordercolor = red>
                        <tr>
                            <td><div class="category"> Distanz A </div></td>
                            <td><div class="valueSmall" id="distA"> 88.88 km/h</div></td>
                            <td> <button type="button" class = "btn" id = "btn0" onclick="ButtonResetDistA()">Reset</button></td>
                        <tr>
                            <td><div class="category"> Distanz B </div></td>
                            <td><div class="valueSmall" id="distB"> 88.88 km/h</div></td>
                            <td> <button type="button" class = "btn" id = "btn1" onclick="ButtonResetDistB()">Reset</button></td>
                        <tr>    
                            <td><div class="category"> GesamtKM </div></td>
                            <td><div class="valueSmall" id="totalDist">88.88 km/h</div></td>
                            <td></td>
                        </td>
                        <tr>
                            <td><div class="category"> GesamtH </div></td>
                            <td><div class="valueSmall" id="totalTime">88.88 h</div></td>
                            <td></td> 
                    </table>
                  </td>
                </tr>
            </table>

          </td>
          <td>
            <table border=5 bordercolor = red>
              <tr>
                <td>
                   <div class="valueBig" id="speed">88.88</div>
                </td>
              </tr>
              <tr>
                <td>
                    kmh
                </td>
              </tr>
              <tr>
                <td>
                    <table border=5 bordercolor = red>
                        <tr>
                          <td><div class="category">Fahrzeit </div></td>
                          <td><div class="valueSmall"  id="dailyTime"> 88.88 h</div></td>
                        </tr>
                        <tr>
                          <td><div class="category" >TagesKM </div></td>
                          <td><div class="valueSmall" id="dailyDist"> 88.88 km/h </div></td>
                        </tr>
                      </table>

                  </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>

  </body>

  <script type="text/javascript">
    // global variable visible to all java functions
    var xmlHttp = createXmlHttpObject();

    // function to create XML object
    function createXmlHttpObject() {
      if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
      } else {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      return xmlHttp;
    }

    function ButtonResetDistA() {
      var xhttp = new XMLHttpRequest();
      var message;


      xhttp.open("PUT", "BUTTON_0", false);
      xhttp.send();
    }

 
    function ButtonResetDistB() {
      var xhttp = new XMLHttpRequest();
    
      xhttp.open("PUT", "BUTTON_1", false);
      xhttp.send();
    }


    function response() {
      var message;
      var xmlResponse;
      var xmldoc;
      var dt = new Date();

      xmlResponse = xmlHttp.responseXML;

      document.getElementById("time").innerText = dt.toLocaleTimeString();
      document.getElementById("date").innerText = dt.toLocaleDateString();


      xmldoc = xmlResponse.getElementsByTagName("SPEED");
      message = xmldoc[0].firstChild.nodeValue;
      document.getElementById("speed").innerText = message;
 
      xmldoc = xmlResponse.getElementsByTagName("DISTA");
      message = xmldoc[0].firstChild.nodeValue;
      document.getElementById("distA").innerText = message;
 
      xmldoc = xmlResponse.getElementsByTagName("DISTB");
      message = xmldoc[0].firstChild.nodeValue;
      document.getElementById("distB").innerText = message;
 
      xmldoc = xmlResponse.getElementsByTagName("TOTALDIST");
      message = xmldoc[0].firstChild.nodeValue;
      document.getElementById("totalDist").innerText = message;
 
      xmldoc = xmlResponse.getElementsByTagName("TOTALTIME");
      message = xmldoc[0].firstChild.nodeValue;
      document.getElementById("totalTime").innerText = message;
 
      xmldoc = xmlResponse.getElementsByTagName("DAILYTIME");
      message = xmldoc[0].firstChild.nodeValue;
      document.getElementById("dailyTime").innerText = message;

 
      xmldoc = xmlResponse.getElementsByTagName("DAILYDIST");
      message = xmldoc[0].firstChild.nodeValue;
      document.getElementById("dailyDist").innerText = message;
 
      xmldoc = xmlResponse.getElementsByTagName("POSITION");
      message = xmldoc[0].firstChild.nodeValue;
      document.getElementById("position").innerText = message;
 
    }

    function process() {
      if (xmlHttp.readyState == 0 || xmlHttp.readyState == 4) {
        xmlHttp.open("PUT", "xml", true);
        xmlHttp.onreadystatechange = response;
        xmlHttp.send(null);
      }
      setTimeout("process()", 100);
    }
  </script>
</html>
Hannes F
  • 339
  • 2
  • 11
  • 2
    Check type of variable before use. `if (typeof(variable) === 'object') {...}` Or use [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) `variable?.property`. – vee Jul 10 '22 at 14:33
  • Or maybe use [nullish coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) `newvar = variable.property ?? ''` – vee Jul 10 '22 at 14:34
  • hi, thanks for your superfast response, where do you mean this would need to be? – Hannes F Jul 10 '22 at 14:35
  • Besides: There is a) the fetch-API https://developer.mozilla.org/en-US/docs/Web/API/fetch and b) the qeurySelector https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector – Thomas Junk Jul 10 '22 at 14:36
  • 4
    To use `.getElementByTagName`, on `xmlResponse`, you would need to parse the xml response first. As it actually is a string... Look for [DOMParser](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser) – Louys Patrice Bessette Jul 10 '22 at 14:39
  • Hi i am not sure if i understand it correct - but ```xmlResponse``` is already an xml (see line 289 - createXmlHttpObject()) so how would i need DOMParser here? – Hannes F Jul 10 '22 at 15:32
  • Your `xmlResponse` variable is come from [`XMLHttpRequest()`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/XMLHttpRequest), please read the document about methods of this class. There are no `getElementByTagName()`. So, you can't use this directly. See answer about this [here](https://stackoverflow.com/questions/28174373/how-to-get-element-from-xmlhttprequest), [here](https://stackoverflow.com/questions/53661013/parsing-and-accessing-dom-elements-from-html-page-fetched-via-ajax-xhr-get-reque) – vee Jul 10 '22 at 16:22

0 Answers0