Accessing variable for HTML page

I want to display the value of A0 pin variable declared in configuration in a HTML page.
How can I access the variable within the script tags?

<body id="body">
  <h1>The Value is :</h1>
  <script>
      var el = document.getElementById("body");
      el.innerHTML += (How to access the variable declared in config??)
  </script>
</body>

you can access the variable like this
document.write(el)

Not the HTML element, I want to access the variable for A0 pin which we declare in hardware section.

Hi!

I have found a way in which you can fetch and display the value of your temperature sensor, the code is attached below, added some comments as well for readability :

Just a small explanation about the code:

iot%202

We created 2 buttons “FETCH DATA” and “DISPLAY DATA” and 2 paragraphs for storing the text and displaying it with IDs = “fetch” and “display”.

We defined two functions fetch_data() and display_data().

fetch_data() :
We call the in-built function analogRead( “pin-name” , “html id” ) which accepts two parameters pin name and HTML ID, this fetches the value from the wifi module from the pin- “pin-name” and displays an alert message in the browser about the status …

iot1 The alert message that appears.

and, adds the text (refer image below) in the “html id” specified.

iot3
This is the text that appears when we use analogRead() function by default after fetching values.
.
( Just in case if you want to see this message then, remove this -> [ style=“visibility: hidden” ] attribute in the paragrapgh tag whose id=“fetch” )
.

display_data() :
This function stores the above text in a variable “Value” and then separates the value fetched (the numeric value) and stores it in a new variable “pin_value” and then displays it (refer below image for output).

iot4
.
After clicking “DISPLAY DATA” the above text is displayed.
.

So…yea :sweat_smile: this is my way on how to fetch and display the value in HTML although this can be done in fewer lines of code but for adding clarity it is done as above.

If this answer has helped you in any way a Thumbs Up would be appreciated. :+1: :smile:

Happy learning ! :desktop_computer:

Note:
The above output images have different values and this is because the screenshots were taken at different time intervals.

1 Like