i have develop a smartcontract :0x34F04C60439B377E61cf11C4B0e470316c7aED5F( event Organizer on bsc testnet) and front end with js. when i click confirm for creating events metamask is popping and the transaction is working. but the entities are not been saved, its going away with refresh. i want it to be persistent on the page. what should i do?
here is my main.js
const serverUrl = "xxxx"
const appId = "xxxx"
Moralis.start({serverUrl, appId})
async function login() {
let user = Moralis.User.current();
if (user) {
try {
user = await Moralis.authenticate({ signingMessage: ' done' });
console.log(user);
let addressOfUser= document.getElementById('address')
addressOfUser.innerHTML="Address:"+(user.get('ethAddress'));
} catch (error) {
console.log(error);
}
}
}
async function createEvent(name, date, price, ticketCount, id) {
await Moralis.enableWeb3();
let op = {
contractAddress: "0x34F04C60439B377E61cf11C4B0e470316c7aED5F",
functionName: "createEvents",
abi: [
{
inputs: [
{ internalType: "string", name: "name", type: "string" },
{ internalType: "uint256", name: "date", type: "uint256" },
{ internalType: "uint256", name: "price", type: "uint256" },
{ internalType: "uint256", name: "ticketCount", type: "uint256" },
{ internalType: "uint256", name: "id", type: "uint256" },
],
name: "createEvents",
outputs: [],
stateMutability: "nonpayable",
type: "function",
},
],
params: {
name,
date,
price,
ticketCount,
id,
},
};
await Moralis.executeFunction(op);
}
let cont = document.getElementById("cont");
let btn = document.getElementById("btn").addEventListener("click", async () => {
var nam = document.getElementById("name").value;
let dt = document.getElementById("date").value;
let pri = document.getElementById("price").value;
let ticketCount = document.getElementById("ticketCount").value;
let id = document.getElementById("id").value;
cont.innerHTML +=
'<div class="well">' +"Project name:" +nam +"<br></br>" +"Deadline:"+dt+"<br></br>"+"Price:" +pri+"<br></br>" +
"TicketCount:"+ticketCount+"<br></br>" +
"ID:"+id+
"</div>" +"<br></br>";
await createEvent(nam, dt, pri, ticketCount, id);
});
document.getElementById('logn').onclick= login;
html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stile.css">
<link href="p.min.css" rel="stylesheet">
<!-- INSTALL THE SDK and WEB3 -->
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<!-- / -->
<title>Document</title>
</head>
<body id="body">
<div><button id="logn">Connect</button></div>
<div id="address"> </div>
<p>Create event </p>
<input type="text" placeholder="name" id="name">
<div><input type="text" placeholder="date" id="date"></div>
<div ><input type="text " placeholder="price" id="price"></div>
<div ><input type="text " placeholder="id" id="id"></div>
<div ><input type="text " placeholder="ticketCount" id="ticketCount"></div>
<button type="submit" id="btn">confirm</button>
<div id="cont"></div>
<script src="main.js"></script>
</body>
</html>