使用 event.preventDefault() 时，单击按钮时页面会重新加载

问题描述 投票：0回答：1

我尝试创建一个类来创建一些交易。我想填写这些值。每当单击该按钮时，都会触发 this.handleClick 函数来创建一个新事务并将其记录到控制台。但是，每当我提交值时，页面都会自动重新加载。我究竟做错了什么？这是使用的代码。

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>

javascript html css class
1个回答
0
投票

您更改事件侦听器，以便它侦听提交事件：

class Transaction {
    constructor(getal, afzender, ontvanger) {
        this.getal = getal;
        this.afzender = afzender;
        this.ontvanger = ontvanger;
        // Set the clicker
        this.form = document.forms.form01;
        this.form.addEventListener('submit', this.handleSubmit);
    }

    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 = '';
    }

    handleSubmit(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!";
    }
}

const transaction = new Transaction("", "", "");
<!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 name="form01" 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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.