HTML内容中的Javascript更改不起作用答案

【问题标题】：Javascript Change in HTML content not workingHTML内容中的Javascript更改不起作用
【发布时间】：2017-01-10 15:24:51
【问题描述】：

我正在使用与我的 HTML 文件位于同一目录中的外部引用的 Javascript 文件。

我的 javascript 程序从“.txt 文件”中读取一些数据并将它们存储在变量速度、高度和压力中。我希望在我的 HTML 中显示这些变量的值。但由于某种原因，这仍然无法正常工作。

Javascript 代码：

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 代码：

<html>

<body>

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

</html>

【问题讨论】：

您正在使用 nodejs fs 库。您无法从浏览器中读取此类文件
你能再解释一下吗..
添加jQuery并将fs.readFile('data.txt', 'utf8', function(error, data) {改为$.get('data.txt', function(data) {

标签： javascript html innerhtml getelementbyid

【解决方案1】：

您使用的 JavaScript 代码是 NodeJS，普通 JavaScript 中没有 require 或 fs。要读取您的文件，请尝试使用 AJAX。

【讨论】：

【解决方案2】：

试试这个 Javascript，它会创建一个 ajax 请求来加载你的 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;
  }
});

还要确保将 jquery 添加到您的 html <head>。

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

【讨论】：

如何将 jquery 添加到我的 HTML 中？
@JonathanPereira 看到我更新的答案。我在帖子末尾添加了如何添加 jquery
HTML 文件中应该添加什么代码？ @Z-Bone。
@JonathanPereira 这个：<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 在下

【解决方案3】：

您正在尝试在浏览器中使用服务器端 node.js 模块。虽然 node.js 和 Web 浏览器都使用 javascript，但环境不同。在这种情况下，您尝试使用节点 fs 模块，该模块在浏览器环境中不可用。

在浏览器环境中读取文件的最常用方法是发出 HTTP 请求。 Z-Bone 的回答是使用 JQuery 的一个很好的例子，这是一个只使用 XMLHttpRequest 对象而没有外部依赖的例子：

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();

请注意，data.txt 必须通过网络服务器提供。如果您尝试使用 file:// 处理程序在本地执行此操作，则由于浏览器 CORS 设置，这将不起作用。

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

【讨论】：