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>
<html>
<head>
<title>DBank</title>
<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" />
</head>
<body>
<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" />
</form>
</div>
<script src="index.js" ></script>
</body>
</html>
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.getElementById("value").innerText=0;
});
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();
document.getElementById("value").innerText=Math.round(cur*1.0);
});
The Motoko code:
import Debug "mo:base/Debug";
actor Dbank {
var balance : Nat = 234;
public func topUp(x:Nat) : async () {
balance += x;
Debug.print(debug_show(balance));
};
public func topDown(x: Nat) : async () {
if (balance > 0) {
balance -= x;
}
};
public func checkBalance() : async Nat {
return balance;
};
};