i tried making a class to create some transactions. I wanted to fill out the values. whenever the button was clicked it would trigger the this.handleClick function to create a new transaction and log this to the console. however, the page automatically reloads whenever i submit the values. what am i doing wrong? here is code used.
class Transaction {
constructor(getal, afzender, ontvanger) {
this.getal = getal;
this.afzender = afzender;
this.ontvanger = ontvanger;
// Set the clicker
this.button = document.getElementById('clicker');
this.button.addEventListener('click', this.handleClick.bind(this));
}
print() {
console.log(`${this.afzender} sent ${this.getal} bits to ${this.ontvanger}`);
}
emptyInputs() {
document.querySelector('#bedrag').value = '';
document.querySelector('#verzender').value = '';
document.querySelector('#ontvanger').value = '';
}
handleClick(event) {
event.preventDefault();
const p = document.querySelector('.confirmation');
p.style.color = 'green';
const bedrag = document.querySelector('#bedrag').value;
const verzender = document.querySelector('#verzender').value;
const ontvanger = document.querySelector('#ontvanger').value;
const transaction = new Transaction(bedrag, verzender, ontvanger);
transaction.print(); // Optionally, print the transaction details
transaction.emptyInputs(); // Clear the input fields
p.innerText = "Transaction made!";
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container d-flex justify-content-center align-items-center flex-column">
<h2>Maak een transactie</h2>
<form class="form-group">
<div>
<label for="bedrag">Bedrag:</label>
<input type="number" class="form-control" id="bedrag" name="bedrag">
</div>
<div>
<label for="verzender">Verzender:</label>
<input type="text" class="form-control" id="verzender" name="verzender">
</div>
<div>
<label for="ontvanger">Ontvanger:</label>
<input type="text" class="form-control" id="ontvanger" name="ontvanger">
</div>
<button type="submit" id="clicker" class="btn btn-primary mt-2 ">Submit</button>
</form>
<p class="confirmation"></p>
</div>
<script src="Transaction.js" type="module"></script>
</body>
</html>
You change the event listener so that it listens for the submit event: