未在 HTML 页面中加载 Javascript 文件

Question

I have a folder structure like this:我有一个这样的文件夹结构：

I have referenced data.js and app.js like this:我已经像这样引用了 data.js 和 app.js：

but my HTML page does not display my data.但我的 HTML 页面不显示我的数据。 I tried using the full file path as well but that does not seem to work either.我也尝试使用完整的文件路径，但这似乎也不起作用。 I tried this ../../UFOs/static/js/data.js as well from another question我也从另一个问题尝试了这个 ../../UFOs/static/js/data.js

I think the error might be in my app.js file.我认为错误可能在我的 app.js 文件中。 I used console.log on internet explorer and it pointed to a syntax error on the highlighted line:我在 Internet Explorer 上使用了 console.log，它指出突出显示行上的语法错误：

app.js应用程序.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);

data.js数据.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 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

add <tbody></tbody> after </thead> in your HTML.在 HTML 中的</thead>之后添加<tbody></tbody> 。

While a <tbody> is not required under the HTML5 spec, your function attempts to append the new rows to that element, so without it, they cannot be displayed, which is the exact problem you are experiencing.虽然 HTML5 规范不需要<tbody> ，但您的函数会尝试将新行附加到该元素，因此如果没有它，它们将无法显示，这正是您遇到的问题。

Alternatively, you could have modified your function to append the rows to the table itself.或者，您可以修改函数以将行附加到表本身。

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

You have syntax errors in app.js, try the below code.您在 app.js 中有语法错误，请尝试以下代码。 buildTable function doesn't have closing brackets. 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