HTML & JavaScript Uncaught ReferenceError: addTable is not defined答案

【问题标题】：HTML & JavaScript Uncaught ReferenceError: addTable is not definedHTML & JavaScript Uncaught ReferenceError: addTable is not defined
【发布时间】：2015-04-30 07:21:50
【问题描述】：

我有一个 javascript 文件，其中包含一些数据数组和一个函数。我正在使用此功能在加载和单击按钮时在 html 页面上显示一个表格。我得到的错误是：

GET http://localhost:3000/views/table.jscontracts.html:84

Uncaught ReferenceError: addTable is not defined contracts.html:84 onclick

我的contracts.html 文件如下所示：

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="/css/portalstyle.css"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head> 

<body id="contracts">
<div id="wrapper">

<!-- Some Header code here -->

<div id="mytable"></div>

<div id="footer">
    <table id="footer" style="width: 100%">
      <tr>
        <td valign="bottom">Company Name
          <br />Tel Num
          <br />Location, Postcode</td>
        <td>
          <button onclick="addTable(ORDER.orders)">Click me</button>
        </td>
        <td align="right" valign="bottom">
          <a href="#">Home</a> &nbsp;<a href="#">About</a> &nbsp;<a href="#">Help</a> &nbsp;<a href="#">Contact</a>
        </td>
      </tr>
    </table>
  </div>
</div>

<hr />

<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>

<script src="../views/table.js"></script>

</body>


</html>

我的 javascript 函数文件名为 table.js 并包含：

var ORDER = {
  orders: []
};

function Order(ref, grower, item) {
  this.order_reference = ("o" + ref);
  this.grower_reference = grower;
  this.item_ordered = item;
}

var order1 = new Order(1, "grower2", "item");
ORDER.orders.push(order1);

function addTable(orders) {
  var table = document.createElement("TABLE");
  table.setAttribute("id", "myTable");
  document.body.appendChild(table);

  for (var i = 0; i < orders.length; i++) {
    var order = orders[i];
    var row = document.createElement("TR");

    var refCell = document.createElement("TD");
    var growerCell = document.createElement("TD");
    var itemCell = document.createElement("TD");

    row.appendChild(refCell);
    row.appendChild(growerCell);
    row.appendChild(itemCell);

    var ref = document.createTextNode(order.order_reference);
    var grower = document.createTextNode(order.grower_reference);
    var item = document.createTextNode(order.item_ordered);

    refCell.appendChild(ref);
    growerCell.appendChild(grower);
    itemCell.appendChild(item);

    table.appendChild(row);
    document.body.appendChild(document.createElement('hr'));
  }
}

window.addEventListener('load', function() {
  addTable(ORDER.orders)
});

我需要在哪里定义 addTable？我该怎么做？

另外，GET 的错误。这是我包含脚本的行。如何阻止此错误发生？

【问题讨论】：

您确定引用 table.js 的方式正确吗？是否可以通过开发者工具在页面上使用？
我不确定...抱歉。如果是，它应该在开发工具上的什么位置？在开发工具上，我的contracts.html 似乎位于views 文件夹下，但其中没有其他内容。这是你的意思吗？
假设您使用的是 Google Chrome，请查看Sources 标签。
是的，我是。好的。我看不到 table.js ...只有我的 contracts.html 页面和 css 文件 - 那么我应该如何引用 table？我使用 ../views/table.js 作为脚本标签的 src，但这似乎不起作用
我不知道你有什么文件夹结构，所以你必须自己通过尝试不同的javascript文件路径来弄清楚。

标签： javascript html

【解决方案1】：

感谢您的建议。他们帮助我查看了正确的代码以找到错误，所以我没有修复它。

这是我的文件夹和我指定的路径错误。我最初在“views”文件夹中有我的 .js 文件，并且使用的是 ../views/table.js。这引发了未定义的错误，因此我创建了一个名为“js”的新文件夹并将文件复制到此处并使用 /js/table.js 指定它，现在它可以工作了。

据我了解../查看了我所在文件夹的父目录，而我需要向上2个文件夹，所以从一个斜杠开始从根目录开始搜索，找到一个名为js的文件夹然后按预期找到了addTable函数。

【讨论】：