时间戳

首页 > 解决方案 > 页面加载时自动按下按钮

javascript - 页面加载时自动按下按钮

问题描述

我是初学者，我正在学习 JavaScript。我正在尝试制作密码生成器。我在 HTML 第 29 行和第 33 行有两个按钮。当我加载页面时，这两个按钮会自动按下，以后无法按下。我不明白为什么会这样！

下面是我的代码：

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>

请帮助我为什么会发生这种情况，我该如何解决？

标签： javascripthtmlcss

解决方案

代替：

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

和：

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

在您的代码中，您在注册事件侦听器时调用了这些函数。您需要传递一个函数。

推荐阅读