时间戳

首页 > 解决方案 > 如何将某些内容（即变量）从 JavaScript 文件传输到 HTML 文件？

javascript - 如何将某些内容（即变量）从 JavaScript 文件传输到 HTML 文件？

问题描述

我正在尝试编写一个网页，该网页将显示带有结果的饼图，但我的饼图的代码位于 HTML 文件 (read_data.html) 和我想用于饼图的数字中位于 JavaScript 文件 (read_data.js) 中

我想要的数字存储在 4 个变量中 - Booth1,Booth2,Booth3,Booth4

我怎样才能将这些变量传输到我的 HTML 文件中？

这是 HTML 文件中饼图的代码

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My Web Page</h1>

<div id="piechart"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Students', 'Votes'],
  ['Canidate1', Booth1],
  ['Canidate2', Booth2],
  ['Canidate3', Booth3],
  ['Canidate4', Booth4],
]);

  // Optional; add a title and set the width and height of the chart
  var options = {'title':'Election Results', 'width':550, 'height':400};

  // Display the chart inside the <div> element with id="piechart"
  var chart = new google.visualization.PieChart(document.getElementById('piechart'));
  chart.draw(data, options);
}
</script>
</body>
</html>

这是 JavaScript 文件中的代码

// Lists to hold the well being states and their corresponding times
var myVotes = [];
var myTimes = [];

// Variables to hold the count for each state
var Booth1 = 0;
var Booth2 = 0;
var Booth3 = 0;
var Booth4 = 0;

// Define database connection to correct child branch, ElectionResults
var myDBConn = firebase.database().ref("ElectionResults");

// Function that acts when a 'new child is added to the DB' - i.e. new data is added this function runs.
myDBConn.on("child_added", function(data, prevChildKey) {
  Booth1 = 0;
  Booth2 = 0;
  Booth3 = 0;
  Booth4 = 0;

  // The data returned from the branch is put into a variable, dataPoint
  var dataPoint = data.val();

  // Populate the lists with the various data from the database
  myVotes.push(dataPoint.ElectionResults);
  myTimes.push(dataPoint.Time);

  // Loop each returned state and add 1 to the appropriate counter
  for (i = 0; i < myVotes.length; i++) {
    if (myVotes[i] == "Canidate1") {
      Booth1 = Booth1 + 1;
    }
    if (myVotes[i] == "Canidate2") {
      Booth2 = Booth2 + 1;
    }
    if (myVotes[i] == "Canidate3") {
      Booth3 = Booth3 + 1;
    }
    if (myVotes[i] == "Canidate4") {
      Booth4 = Booth4 + 1;
    }
  }

  // Update the page elements with the average and the last item (most rescent) off the list
  document.getElementById("TimeID").innerHTML = myTimes[myTimes.length - 1];

  // Update the page elements with the results of each count
  document.getElementById("Booth1").innerHTML = Booth1;
  document.getElementById("Booth2").innerHTML = Booth2;
  document.getElementById("Booth3").innerHTML = Booth3;
  document.getElementById("Booth4").innerHTML = Booth4;
});

标签： javascript

解决方案

我认为您可以通过使用<script />标记将 JS 文件包含到 HTML 文件中；

<script type="something" src="read_data.js"></script>

使用此标签，您可以包含文件，并且可以通过打开另一个script标签来使用变量；

<script>
  //import variables here
</script>

推荐阅读