1

I know this has been asked, and I did search but couldn't find a similar case,so I decided to ask this question again.

Can anyone tell me whats the issue in here, because the first two Axis-X and Axis-Y work perfect but its the Axis-Z that gives me the

"Cannot set property 'nodeValue' of null"

error on my website.
The exact issue I face is that the first two, Axis-X and Axis-Y do pass the values without a problem, and only Axis-Z gives me the error above, my question is, why does it give me that error, and why is it only this one and not all 3 of them. Just to note, msg.payload in the Axis-Z if statement, does carry a value that its suppose to.

Here is the Javascript:

 if (index.contains('Gyroscope')) { //Get all data from Gyroscope queue

    if((index.indexOf('Axis-X')) >= 0){//X-Axis queue  && 'X-Axis'
      // var sendData1 = msg.payload;
      // printText("gyrX", sendData1); //Publish data to the textArea
      // //console.log("I send Axis-X");
      document.getElementById('gyrX').firstChild.nodeValue = msg.payload;
    };

    if((index.indexOf('Axis-Y')) >= 0){
      // var sendData1 = msg.payload;
      // printText("gyrY", sendData1); //Publish data to the textArea
      // //console.log("I send Axis-Y");
      document.getElementById('gyrY').firstChild.nodeValue = msg.payload;
    };

    if((index.indexOf('Axis-Z')) >= 0){
      //var sendData1 = msg.payload;
      //printText("gyrZ", msg.payload); //Publish data to the textArea
      console.log("I send Axis-Z" + msg.payload);
      document.getElementById('gyrZ').firstChild.nodeValue = msg.payload;
    };
  };

Here is the jade:

  main.hoc.container.clear(styles='width:100%;')
    .sidebar.four_quarter.first(styles='width:30%;')
      table
        tr
          th(colspan='4')  Gyroscope Readings
        tr
          td(style='width:50%;') Gyroscope X:
          td(style='width:50%;')
            span#gyrX  
        tr
          td(style='width:50%;') Gyroscope Y:
          td(style='width:50%;')
            span#gyrY  
        tr
          td(style='width:50%;') Gyroscope Z:
          td(style='width:50%;')
            span#gyrZ
      p
        | Note: Sensor accuracy at current configuration can have a difference of 5 degree, calibration is needed.
      p
        | Note: Sensor takes the angle it was turned on at as 0 degree, make sure that everything is leveled before turning system on.
      br

I simplified the code before coming here, thats why alot is commented out.Also, could someone explain to me, why this happened?

B.Chmielewski
  • 15
  • 7
  • Maybe that there some additional information needed; I don't see the ids of your html – edkeveked Nov 30 '17 at 15:36
  • One of your elements doesn't have a `.firstChild`. – Jared Smith Nov 30 '17 at 15:38
  • 1
    Well, the only way document.getElementById('gyrZ') is null is because there's no element with the ID 'gyrZ' in the DOM. – Gomes Nov 30 '17 at 15:39
  • Possible duplicate of [Uncaught TypeError: Cannot set property 'value' of null](https://stackoverflow.com/questions/16100543/uncaught-typeerror-cannot-set-property-value-of-null) – Jared Smith Nov 30 '17 at 15:39
  • @Gomes — `document.getElementById('gyrZ')` is **not** `null`, `document.getElementById('gyrZ').firstChild` is. – Quentin Nov 30 '17 at 16:05
  • Yes @Quentin, you're right, thanks for pointing that out... But the reasoning is the same, the element exists but has no firstChild as Jared Smith already said. – Gomes Nov 30 '17 at 16:32

1 Answers1

2

Your Jade defines a number of span elements with no content.

Your JavaScript attempts to access the firstChild of those spans (expecting to find a text node there) and fails, because there is no content, so no text node.

Set the textContent of the spans instead of the nodeValue of their first children.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • But if that's the case, then why do the first two rows have text in them on the website, while the 3rd one doesn't? here is the link: http://87.44.19.169:3000/gyro I hope it works – B.Chmielewski Nov 30 '17 at 16:07
  • @B.Chmielewski — The first two contain a space, the third does not. – Quentin Nov 30 '17 at 16:10
  • Okey, Now I feel stupid. Thank you for pointing that out, I was going mad about this for past 2 hours. – B.Chmielewski Nov 30 '17 at 16:13