未在 HTML 页面中加载 Javascript 文件

Question

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

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

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

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

应用程序.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>

Answer 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);
    });
  });
}

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

未在 HTML 页面中加载 Javascript 文件

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-07-01 03:58:48

解决方案2
0 2021-07-01 02:56:24

未在 HTML 页面中加载 Javascript 文件

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-07-01 03:58:48

解决方案2 0 2021-07-01 02:56:24

解决方案1
1 已采纳 2021-07-01 03:58:48

解决方案2
0 2021-07-01 02:56:24