将 .js 函数移动到单独的文件后，程序停止工作答案

【问题标题】：The program stops working after moving .js functions to a separate file将 .js 函数移动到单独的文件后，程序停止工作
【发布时间】：2022-07-08 20:25:01
【问题描述】：

我想将我的函数移动到一个单独的 js 文件，但是当我这样做时，它们停止工作。如何解决这个问题？当您想将函数移动到单独的 *.js 文件时，还有其他一些语法吗？

function edit_description() {
    var targetDescription = $("#description-1");
    var value = targetDescription.text();

    if (value != "") {
            value = ""
        };

    targetDescription.html(`<input class="description form-control" data-target="description-1" type="text" value=${value}>`);

    $("input:text").focus();

    $("input").blur(function (e) {
        e.preventDefault();
        var target = targetDescription.children('input').attr("data-target");
        $(`#${target}`).text($(this).val());
        var description = $(this).val();
        save_description(identification = "description-1", description);
      });
};
function save_description(identification, description){
    console.log('Saved!');

    var userInput = {"identification":identification, "description":description};
};

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  </head>

  <body>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src=/static/main.js></script>

    <div class="table-wrapper">
      <table id="table" class="table table-striped">
        <thead>
          <tr>
            <th scope="col"><span>Edit</span></th>
            <th scope="col"><span>Description</span></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td id = "edit-1"><a class="btn" role="button" onclick="edit_description();">Edit ></a></td>
            <td id = "description-1">Lorem</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

如您所见，我将我的 js 放在静态目录中名为 main.js 的文件中。

【问题讨论】：

尝试在body末尾调用JS文件
检查浏览器控制台的错误日志。另外，检查你的js脚本的路径是否存在（这里我看到你使用的是绝对路径）
“他们停止工作了” - 你有什么错误吗？
避免使用绝对路径，因为应用程序可能并不总是位于域的根目录中，请坚持使用相对路径。如果脚本在同一文件夹中，请使用src="./main.js"
在您提出问题之前，您应该在开发工具的网络选项卡中检查正在请求的文件。这会将您定向到它实际尝试下载的文件，并为您提供有关路径有什么问题的线索。

标签： javascript html

【解决方案1】：

避免使用绝对路径，因为应用可能并不总是位于域的根目录中，请坚持使用相对路径。

如果脚本与 HTML 文件位于同一文件夹中，请使用 src="./main.js"

【讨论】：

【解决方案2】：

缺少双引号 ("")！试试这个：

<script src="/static/main.js"></script>

或者这个：

<script src="~/static/main.js"></script>

【讨论】：

您谈论双引号，然后添加波浪号 (~)，这对于尝试查找文件的浏览器没有任何意义。引号也很好，但在这种情况下不需要。仅当您的属性（或其他特殊字符）中有空格时才真正需要。请参阅mathiasbynens.be/notes/unquoted-attribute-values
(~) 用于根目录。 html页面可能在另一个文件夹中而不是在根目录中，并且名为“static”的文件夹也在根目录中。
~ 表示 UNIX 机器上命令行中用户的主目录，而不是 HTML 页面上的路径。当在服务器端上下文中使用时，一些 Web 服务器可能会给它~ 一个特殊的含义，但作为一个纯 HTML 页面，它没有任何意义。见stackoverflow.com/questions/6252471/…
你建议的解决方案，@ChaudhryHammadWali 不起作用。考虑到堆栈溢出实际上是一个相当困难的人群，如果你甚至给出了一个好的答案或提出了一个好问题但以错误的方式做，你可能会失去分数。你的回答是不经思考的，而且，嗯，是错误的。如果您想为这个论坛做出贡献，请更认真地对待它:) 只是来自已经获得堆栈溢出“爱”的人的友好建议；P