Javascript 文件未在 HTML 页面中加载答案

【问题标题】：Javascript files not loading in HTML pageJavascript 文件未在 HTML 页面中加载
【发布时间】：2021-07-01 00:01:28
【问题描述】：

我有一个这样的文件夹结构：

我已经像这样引用了 data.js 和 app.js：

但是我的 HTML 页面没有显示我的数据。我也尝试使用完整的文件路径，但这似乎也不起作用。我也从另一个问题尝试了这个 ../../UFOs/static/js/data.js

我认为错误可能在我的 app.js 文件中。我在 Internet Explorer 上使用了 console.log，它在突出显示的行上指出了一个语法错误：

app.js

// import the data from data.js
const tableData = data;

// Reference the HTML table using d3
var tbody = d3.select("tbody");
function buildTable(data) {
  data.forEach((dataRow) => {
    let row = tbody.append("tr");
    Object.values(dataRow).forEach((val) => {
      let cell = row.append("td");
      cell.text(val);
      }
    );
  });


function handleClick() {
    // Grab the datetime value from the filter
    let date = d3.select("#datetime").property("value");
    let filteredData = tableData;
  
     // Check to see if a date was entered and filter the
    // data using that date.
    if (date) {
      // Apply `filter` to the table data to only keep the
      // rows where the `datetime` value matches the filter value
      filteredData = filteredData.filter(row => row.datetime === date);
    };
  
     // Rebuild the table using the filtered data
    // @NOTE: If no date was entered, then filteredData will
    // just be the original tableData.
    buildTable(filteredData);
  };
// Attach an event to listen for the form button
d3.selectAll("#filter-btn").on("click", handleClick);

// Build the table when the page loads
buildTable(tableData);

数据.js

var data = [
  {
    datetime: "1/1/2010",
    city: "benton",
    state: "ar",
    country: "us",
    shape: "circle",
    durationMinutes: "5 mins.",
    comments: "4 bright green circles high in the sky going in circles then one bright green light at my front door."
  },
  {
    datetime: "1/1/2010",
    city: "bonita",
    state: "ca",
    country: "us",
    shape: "light",
    durationMinutes: "13 minutes",
    comments: "Three bright red lights witnessed floating stationary over San Diego New Years Day 2010"
  }
  ];

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UFO Finder</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="static/css/style.css">
    
</head>
<body class="bg-dark">
    <div class="wrapper">
        <nav class="navbar navbar-dark bg-dark navbar-expand-lg">
            <a class="navbar-brand" href="index.html">UFO Sightings</a>
        </nav>
        <div class="jumbotron">
            <h1 class="display-4">The Truth Is Out There</h1>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                    <h3>UFO Sightings: Fact or Fancy? <small>Ufologists Weigh In</small></h3>
                </div>
                <div class="col-md-8">
                   
                        
                        <p>Some text</p>

                </div>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-3">
                            <form class="bg-dark">
                                <p>Filter Search</p>
                                <ul class="list-group bg-dark">
                                    <li class="list-group-item bg-dark">
                                        <label for="date">Enter Date</label>
                                        <input type="text" placeholder="1/10/2010" id="datetime"/>
                                    </li>
                                    <li class="list-group-item bg-dark">
                                        <button id="filter-btn" type="button" class="btn btn-dark" >Filter Table</button>
                                    </li>
                                </ul>
                            </form>

                        </div>
                        <div class="col-md-9">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>City</th>
                                        <th>State</th>
                                        <th>Country</th>
                                        <th>Shape</th>
                                        <th>Duration</th>
                                        <th>Comments</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.js"></script>
    <script type="text/javascript" src="./static/js/data.js"></script>
    <script type="text/javascript" src="./static/js/app.js"></script>
</body>
</html>

【问题讨论】：

您的路径是相对于您的索引文件的，该文件已经在静态文件夹中。试试./js/data.js 和./js/app.js。
在浏览器开发者工具控制台中你能看到javascript文件被正确加载吗？还是有 404 错误？
@JaromandaX 控制台没有404错误
"...在 Internet Explorer 上，它指向一个语法错误"。这是一条红鲱鱼。您的代码无法在 IE 11 中运行，因为您使用了 ES2015 语法。这是一个完全独立的问题。我强烈建议在调试此问题时不要使用 IE 11 来测试它。如果你真的需要它在 IE 11 中工作（如果可能的话，我会避免使用它......），我建议让一切都在 Chrome/Firefox 中工作并将代码移植到 ES5 后记。
@aolayeye - 在您没有在 data.js 上收到 404 错误（未找到文件）的一种情况下，请尝试在控制台中输入 data。它会返回任何东西还是告诉您data is not defined？此外，正如 Stacks Queue 建议的那样，尝试分别将 console.log('app loaded'); 和 console.log('data loaded'); 添加到 app.js 和 data.js 的末尾，看看控制台中是否显示其中一行或两行。

标签： javascript html d3.js

【解决方案1】：

在 HTML 中的 </thead> 之后添加 <tbody></tbody>。

虽然在 HTML5 规范下不需要 <tbody>，但您的函数会尝试将新行附加到该元素，因此如果没有它，它们将无法显示，这正是您遇到的问题。

或者，您可以修改函数以将行附加到表本身。

const dataTable = d3.select('table');
function buildTable(data) {
  data.forEach((dataRow) => {
    let row = dataTable.append("tr");
    Object.values(dataRow).forEach((val) => {
      let cell = row.append("td");
      cell.text(val);
    });
  });
}

【讨论】：

【解决方案2】：

您在 app.js 中有语法错误，请尝试以下代码。 buildTable 函数没有右括号。

     
    // import the data from data.js
    const tableData = data;
    
    // Reference the HTML table using d3
    var tbody = d3.select("tbody");
    function buildTable(data) {
      data.forEach((dataRow) => {
        let row = tbody.append("tr");
        Object.values(dataRow).forEach((val) => {
          let cell = row.append("td");
          cell.text(val);
          });
      });
    }
    function handleClick() {
        // Grab the datetime value from the filter
        let date = d3.select("#datetime").property("value");
        let filteredData = tableData;
      
         // Check to see if a date was entered and filter the
        // data using that date.
        if (date) {
          // Apply `filter` to the table data to only keep the
          // rows where the `datetime` value matches the filter value
          filteredData = filteredData.filter(row => row.datetime === date);
        }
      
         // Rebuild the table using the filtered data
        // @NOTE: If no date was entered, then filteredData will
        // just be the original tableData.
        buildTable(filteredData);
      }
    // Attach an event to listen for the form button
    d3.selectAll("#filter-btn").on("click", handleClick);
    
    // Build the table when the page loads
    buildTable(tableData);

【讨论】：

抱歉@dev，我想我在编辑问题时错过了最后 2 位代码。我刚刚更新了 buildTable 函数之后的部分
@aolayeye 我已经更新了代码，再试一次
数据仍未显示
您在控制台上看到任何语法错误或错误吗？