Javascript not working after dfx deploy: The frontend html-css and backend motoko are working fine BUT the javascript I have added doesn't seem to connect them

I have placed my javascript code in the public folder and I added this
import {dbank} from "../../declarations/Dbank_backend";
to import my motoko modules and functions.
But the javascript does not seem to work. When I use the candid user or the frontend host, everything is fine. Please help me see where I have gone wrong…
HTML Code:

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link type="text/css" rel="stylesheet" href="/main.css" />
    <div class="container">
      <img src="dbank_logo.png" alt="DBank logo" width="100"/>
      <h1>Current Balance: $<span id="value">234</span></h1>
      <div class="divider"></div>
      <form action="#">
      <h2>Amount to Top Up</h2>
      <input id="input-amount" type="number" step="0.01" min=0 name="topUp" value=""/>
      <h2>Amount to Withdraw</h2>
      <input id="withdrawal-amount" type="number" name="withdraw" step="0.01" min=0 value=""/>
      <input id="submit-btn" type="submit" value="Finalise Transaction" />
    <script src="index.js" ></script>

Javascript code:
Please see where I have gone wrong
Even the console.log does not give any output…
IT IS Not connected properly or I might have made a mistake of placing the file in the wrong directory. I don’t know.
Name of the js file is index.js
for html: index.html

 import {dbank} from "../../declarations/Dbank_backend";

 window.addEventListener("load",async function() {
    console.log("page refreshed");
const cur=await dbank.checkBalance();

 document.querySelector("form").addEventListener("submit", async function(e){
const inp=parseFloat(document.getElementById("input-amount")).value;
const out=document.getElementById("withdrawal-amount").value;
await dbank.topUp(inp);
const cur=await dbank.checkBalance();


The Motoko code:

import Debug  "mo:base/Debug";

actor Dbank {

  var balance : Nat = 234;

  public func topUp(x:Nat) : async () {
    balance += x;

  public func topDown(x: Nat) : async () {
    if (balance > 0) {
      balance -= x;

  public func checkBalance() : async Nat {
    return balance;

Have you ran dfx generate in the command recently? Can you take a look at your declaration files?

I suggest:

  1. Checking your src/declarations/DBank_backend/DBank_backend.did, src/declarations/DBank_backend/DBank_backend.did.d.ts, and src/declarations/DBank_backend/DBank_backend.did.js includes all of the functions correctly typed.

  2. Reference your .env file and check the src/declarations/DBank_backend/DBank_backend.index.js is passing in the canisterId correctly. This is more of an issue for specific frontend frameworks that require specific environment variable names and should not be a problem for you as you are only using HTML.

For example, NextJS requires public variables to be appended with NEXT_PUBLIC.


export const canisterId =