how to import external js file when using bootstrap?-CodePudding

I am very new to front-end dev and am trying to write an onClick() function for an element. However, the js file where the function lies seems not imported. I've followed some instructions to modify the orders, but unfortunately, it didn't solve my problem.

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");
}

Both of the functions in this file are not functioning. And I can't see the js folder in Source panel of my broswer.

Console output

Uncaught ReferenceError: showRsvs is not defined

CodePudding user response：

Remove the include js from the head, <link> tag is used to include css files, <script> tag is used for js files.

After </nav>, where nav ends insert these two lines

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

You are good to go