4 Replies - 382 Views - Last Post: 30 November 2019 - 04:47 AM

#1 PhilTilson   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 28-November 19

How do I get the value of a web page element?

Posted 28 November 2019 - 04:15 PM

I am just getting into Javascript and interactive web pages, and have hit a snag that two days of poking round various reference sources has failed to solve. From past experience, I know it will be trivially simple! I just need to be pointed in the right direction.

To summarise, the web page is used to control and monitor a device which obtains opinions. The device incorporates an ESP8266 which provides a web server. The 'sending' side of the web page works fine and I can control the various features on the device.

What I am trying to do is to get two items of data from the device and display them on the screen, the current time and a battery voltage. The code below achieves these quite happily (though there are probably better ways of doing it!). What I CANNOT do, however, is to use the value of battVolts to change the background colour of the field in which it is displayed. The function that should do this is at the bottom of the code, but the web console just comes up with "ReferenceError: number is not defined" every second. I have tried various 'variable names' in the IF statements and in a Switch statement, but to no avail.

What am I missing here??

[AT THIS POINT I HAVE TRIED TO POST MY HTML/Javascript CODE, BUT EVERY TIME I DO, I GET BLOCKED! THE CODE IS BETWEEN TAGS, AS INSTRUCTED - WHY AM I BEING BLOCKED? WHAT MUST I NOT INCLUDE IN ORDER TO AVOID THIS?

Is This A Good Question/Topic? 0
  • +

Replies To: How do I get the value of a web page element?

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5510
  • View blog
  • Posts: 14,499
  • Joined: 18-April 07

Re: How do I get the value of a web page element?

Posted 28 November 2019 - 04:23 PM

Perahps it might be because of some security precautions put in place recently. Put your code on a site like codepen.io or jsfiddle.net and then post the link. That is even nicer because you can show it not work and we can tinker with it to fix it up and give you a new version.

:)
Was This Post Helpful? 1
  • +
  • -

#3 PhilTilson   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 28-November 19

Re: How do I get the value of a web page element?

Posted 28 November 2019 - 04:33 PM

Hope I've got this right!

Try looking at: this link

Thanks for the suggestion.
Was This Post Helpful? 0
  • +
  • -

#4 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5510
  • View blog
  • Posts: 14,499
  • Joined: 18-April 07

Re: How do I get the value of a web page element?

Posted 28 November 2019 - 05:04 PM

Yeah for the most part that is fine. So first of all, remember that Javascript is case sensitive. So instead of "number" it is "Number". Next, make sure you have actually defined the variable battVolts. Yes you have an element named that and you are reading it with document.getElementById, but Number() is being used on a variable called battVolts.

If you go to the following pen, you will see I have done a few things to your code. First I commented out all your XMLHtmlRequest stuff because it was having issues inside of codepen (not your fault). Secondly, I setup a variable called battVolts and set it to pull a random number between 1 and 25. I then changed your if statements a little to more easily detect the ranges. With all this you will see that the field starts changing colors as requested.

https://codepen.io/Martyr2/pen/OJJKqaX

Hopefully you can see what I am doing here. I commented it as I went through. Hope this helps! :)

Edit: Btw, if you watch the pen with developer tools console open, you will see the numbers being generated.

This post has been edited by Martyr2: 28 November 2019 - 05:09 PM

Was This Post Helpful? 1
  • +
  • -

#5 PhilTilson   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 28-November 19

Re: How do I get the value of a web page element?

Posted 30 November 2019 - 04:47 AM

That seems to do the trick! Can't believe I missed the capitalisation on Number - too many years programming in VB!

Thanks for your help.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1