使用Bootstrap时如何引入外部JS文件？函数未定义报错如何解决

1. 核心错误修复：JS文件引入标签错误 #

你当前使用<link>标签引入JavaScript资源，这是导致JS文件完全不加载、showRsvs is not defined报错的根本原因：<link>标签仅用于引入样式表、站点图标等资源，JS文件必须使用<script>标签引入。
将<head>中的两行错误引入代码替换为正确写法：

<!-- 错误写法可直接删除
<link type="javascript" href="../js/jquery-1.11.0.js">
<link type="javascript" href="../js/index.js">
-->
<!-- 正确引入写法 -->
<script src="../js/jquery-1.11.0.js"></script>
<script src="../js/index.js"></script>

修改后重新加载页面，浏览器就会正常请求JS文件，开发者工具Source面板也会显示对应的js文件夹。

2. 代码逻辑问题修复 #

2.1 点击函数this指向问题 #

行内onclick绑定的函数直接调用时，内部this默认指向window，不会指向被点击的a标签，两种修复方案二选一即可：

• 方案1：修改行内绑定，传入元素本身

  <a class="nav-link" href="#" onclick="showRsvs(this)">
      My Reservations
  </a>
  

  同步修改JS函数：

  function showRsvs(el){
      $(el).addClass("active");
  }
  

• 方案2（更推荐）：取消行内绑定，用jQuery事件绑定，符合结构逻辑分离规范
  先删掉a标签的onclick="showRsvs()"属性，再修改index.js代码：

  $(function(){
      // 原有时间刷新逻辑
      setInterval(function(){
          $("#clock").html(getTime());
      }, 1000);
      // 新增点击事件绑定
      $(".nav-link").click(function(e){
          e.preventDefault(); // 阻止a标签默认跳转行为
          $(this).addClass("active");
      })
  })
  

2.2 缺失函数补充 #

你现有代码中调用的getTime()如果没有在其他地方定义，需要补充实现，否则时间刷新逻辑会报错，示例实现如下：

function getTime() {
  return new Date().toLocaleString();
}

3. 可选优化项 #

• 现代浏览器已经不需要为script标签添加type属性，可以直接省略
• 可以将script标签移到</body>闭合标签前引入，避免JS加载阻塞页面渲染

内容的提问来源于stack exchange，提问作者Navxihziq