Javascript Change in HTML content not working

Question

I am using an externally referenced Javascript file which is in the same directory as my HTML file.

My javascript program reads some data from a ".txt file" and stores them in variables speed,altitude & pressure. I wish to display the values of these variables in my HTML. But for some reason this is still not working.

Javascript Code:

var fs = require('fs');
fs.readFile('data.txt', 'utf8', function(error, data) {
  var content = data;
  console.log(content);


  var obj = JSON.parse(content);
  var speed = obj.speed_json;
  console.log(speed);
  var altitude = obj.altitude_json;
  console.log(altitude);
  var pressure = obj.pressure_json;
  console.log(pressure);
});

document.getElementById("pressurehtml").innerHTML = altitude;
document.getElementById("speedhtml").innerHTML = speed;
document.getElementById("altitudehtml").innerHTML = pressure;

HTML Code:

<html>

<body>

  <h1 id="pressurehtml">Pressure</h1>
  <h1 id="altitudehtml">Altitude</h1>
  <h1 id="speedhtml">Speed</h1>
  <script src="main.js"></script>
</body>

</html>

You are using nodejs `fs` library. You cannot read files like this from the browser — Z-Bone, Jan 10 '17 at 15:26
Add jQuery and change `fs.readFile('data.txt', 'utf8', function(error, data) {` to `$.get('data.txt', function(data) {` — mplungjan, Jan 10 '17 at 15:36

score 0 · Answer 1 · answered Jan 10 '17 at 15:26

0

The JavaScript code you are using is NodeJS, there is no require or fs in normal JavaScript. To read your file, try using AJAX.

answered Jan 10 '17 at 15:26

NikxDa

4,137
1
26
48

Z-Bone · Answer 2 · 2017-01-10T15:57:27.390

0

Try this Javascript which will create an ajax request to load your JSON.

$.ajax({
  url: 'data.txt',
  dataType: 'json',
  success: function(data) {
    var speed = data.speed_json;
    var altitude = data.altitude_json;
    var pressure = data.pressure_json;

    // Append to HTML
    document.getElementById("pressurehtml").innerHTML = altitude;
    document.getElementById("speedhtml").innerHTML = speed;
    document.getElementById("altitudehtml").innerHTML = pressure;
  }
});

Also be sure to add jquery to your html <head>.

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

edited Jan 10 '17 at 15:57

answered Jan 10 '17 at 15:37

Z-Bone

1,534
1
10
14

How do i add the jquery to my HTML? – Jonathan Pereira Jan 10 '17 at 15:48
@JonathanPereira see my updated answer. I added how to add jquery at the end of my post – Z-Bone Jan 10 '17 at 15:58
What should be the code added to the HTML file? @Z-Bone. – Jonathan Pereira Jan 11 '17 at 15:01
@JonathanPereira this: `` under the – Z-Bone Jan 11 '17 at 15:02

score 0 · Answer 3 · edited May 23 '17 at 12:07

You're trying to use a server-side node.js module in the browser. While node.js and web browsers both use javascript, the environments are different. In this case, you're trying to use the node fs module, which is not available in the browser environment.

The most common way to read a file in the browser environment is to make an HTTP request. Z-Bone's answer is a good example using JQuery, here's one that only uses the XMLHttpRequest object with no external dependencies:

var req = new XMLHttpRequest();
req.open('GET', 'data.txt', true);

req.onreadystatechange = function(error) {
  if (req.readyState === 4) {
    if (req.status === 200) {
      var content = req.responseText;
      console.log(content);

      var obj = JSON.parse(content);
      var speed = obj.speed_json;
      console.log(speed);
      var altitude = obj.altitude_json;
      console.log(altitude);
      var pressure = obj.pressure_json;
      console.log(pressure);

      document.getElementById("pressurehtml").innerHTML = altitude;
      document.getElementById("speedhtml").innerHTML = speed;
      document.getElementById("altitudehtml").innerHTML = pressure;

    } else {
      console.error(req.statusText);
    }
  }
};

req.send();

Note that data.txt must be served out through a webserver. If you're trying to do this locally using the file:// handler this will not work due to browser CORS settings.

For more info:

How to get the response of XMLHttpRequest?

https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started

Javascript Change in HTML content not working

3 Answers3