Button is automatically pressed on pageload

I am a beginner and I am learning JavaScript. I am trying to make a password generator. I have two buttons in HTML line 29 and line 33. When I load the page, the two buttons are pressed automatically and can’t be pressed later. I can’t figure out why is this happening!

Here is my code below:

const minusEl = document.getElementById('minus');
const plusEl = document.getElementById('plus');
const passwordLengthEl = document.getElementById('password-length');


// Password Length
function passwordLengthChose(value) {
    const passwordLength = parseInt(passwordLengthEl.innerText) + value;
    passwordLengthEl.innerText = passwordLength;
    console.log(passwordLength);
    console.log("clickd");
}

minusEl.addEventListener('click', passwordLengthChose(-1));
plusEl.addEventListener('click', passwordLengthChose(1));
<!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">
    <title>Random Password Generator - Avast Clone by Dabananda Mitra</title>
    <!-- FontAwesome Icon CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="https://res.cloudinary.com/djz3p8sux/raw/upload/v1631537358/StackOverflow/main_mjkv8p.css">
</head>
<body>
    <!-- Title -->
    <h1>Random Password Generator</h1>

    <!-- Main Markup -->
    <main>
        <section id="password-generator-box">
            <input type="text" id="password-display">
            <button type="button" id="regenerate-password">
                <i class="fas fa-sync"></i>
            </button>
            <button type="button" id="copy">COPY</button>
        </section>
        <section id="password-length-box">
            <h3>Password legnth: </h3>
            <div id="password-length-section">
                <button id="minus" type="button">
                    <i class="fas fa-minus"></i>
                </button>
                <span id="password-length">8</span>
                <button id="plus" type="button">
                    <i class="fas fa-plus"></i>
                </button>
            </div>
        </section>
    </main>

    <!-- Custom JavaScript -->
    <script src="./javascripts/theme.js"></script>
    <script src="./javascripts/password-generator.js"></script>
</body>
</html>

Please help me why it is happening and how can I solve it?

Answer

Replace:

minusEl.addEventListener('click', passwordLengthChose(-1));
plusEl.addEventListener('click', passwordLengthChose(1));

With:

minusEl.addEventListener('click', () => passwordLengthChose(-1));
plusEl.addEventListener('click', () => passwordLengthChose(1));

In your code, you were calling the functions when registering the event listeners. You need to pass a function instead.