使用引导程序时如何导入外部js文件？答案

【问题标题】：how to import external js file when using bootstrap?使用引导程序时如何导入外部js文件？
【发布时间】：2023-03-30 10:48:01
【问题描述】：

我对前端开发非常陌生，正在尝试为元素编写 onClick() 函数。但是，函数所在的js 文件似乎没有导入。我已经按照一些说明修改了订单，但不幸的是，它并没有解决我的问题。

index.html

<head>
    <meta charset="utf-8">
    <link type="javascript" href="../js/jquery-1.11.0.js">
    <link type="javascript" href="../js/index.js">
    <link rel="stylesheet" href="../bootstrap-5.1.3-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <title>Index</title>
</head>

<nav id="sideBarMenu" class="col-md-3 col-lg-2 d-md-block sidebar collapse">
    <div class="position-sticky pt-3">
        <h6 class="sidebar-heading d-flex justify-content-between align-items-center text-muted ps-2">
            <span> Personal Notification </span>
        </h6>
        <ul class="nav flex-column mb-2">
            <li class="nav-item">
            <a class="nav-link" href="#" onclick="showRsvs()">
                My Reservations
            </a>
            </li>
        </ul>
    </div>
</nav>

index.js

$(function(){
    // refresh time every seconds
    setInterval(function(){
        $("#clock").html(getTime());
    }, 1000);
})

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

此文件中的两个函数都不起作用。而且我在我的浏览器的Source 面板中看不到js 文件夹。

控制台输出

Uncaught ReferenceError: showRsvs is not defined

【问题讨论】：

标签： javascript html jquery twitter-bootstrap

【解决方案1】：

从head中删除包含js，<link>标签用于包含css文件，<script>标签用于js文件。

在</nav> 之后，nav 结束处插入这两行

<script src="../js/jquery-1.11.0.js"></script>
<script src="../js/index.js"></script>

你很高兴

【讨论】：

非常感谢您拯救了我的一天！（虽然这里已经是晚上了）
哈哈，很高兴成功