添加样式时 HTML 按钮不起作用

Question

我正在使用 HTML、PHP 和 Javascript 制作注册表单，我发现添加样式时 button 不起作用。

这是我的 HTML 代码，

...

<form action="signupProcess.php" method="POST" id="signup-form">
        <div class="w-50 ml-auto mr-auto mt-5">
            <div class="mb-3 ">
                <label for="id" class="form-label">ID</label>
                <input name="id" type="text" class="form-control" id="id" placeholder="~~~">
                <button type="button" class="btn btn-secondary" onclick="checkIDDuplication()" style="position:relative; float: right; margin-top: 5px;">ID duplication check</button>
            </div>
            <div class="mb-3 ">
                <label for="password" class="form-label">Password</label>
                <input name="password" type="password" class="form-control" id="password" placeholder="~~~">
            </div>
            <div class="mb-3 ">
                <label for="passwordCheck" class="form-label">Password (again)</label>
                <input name="passwordCheck" type="password" class="form-control" id="password-check"
                    placeholder="~~~">
            </div>
            <div class="mb-3 ">
                <label for="email" class="form-label">Email</label>
                <input name="email" type="text" class="form-control" id="email" placeholder="~~~">
                <button type="button" class="btn btn-secondary" onclick="checkEmailDuplication()" style="position:relative; float: right; margin-top: 5px;">Email Duplication check</button>
            </div>

            <div class="col text-center">
                <button type="button" id="signup-button" class="btn btn-primary mb-3" style="position:relative; text-align: center; margin-top: 100px;">Register!</button>
            </div>
        </div>

...

这是我的 Javascript 文件，其中存在 checkIDDuplication() 和 checkEmailDuplication()。

// ID check
function checkIDDuplication() {

    let id = document.getElementById("id").value;

    if (id) {
        url = "checkID.php?id=" + id;
        window.open(url, "check ID", "top=50, left=50, width=300, height=100");
    } else {
        alert("Enter ID first");
    }

    return;

}

//Email check
function checkEmailDuplication() {
 
    let email = document.getElementById("email").value;

    if (email) {
        url = "checkEmail.php?email=" + email;
        window.open(url, "check Email", "top=50, left=50, width=300, height=100");
    } else {
        alert("Enter Email First");
    }

    return;

}

但奇怪的是，检查电子邮件重复的按钮不起作用（无法点击），而检查 ID 重复的按钮却完美无缺。

（身份证检查）

<button type="button" class="btn btn-secondary" onclick="checkIDDuplication()" style="position:relative; float: right; margin-top: 5px;">ID 중복 검사</button>

（电子邮件检查）

<button type="button" class="btn btn-secondary" onclick="checkEmailDuplication()" style="position:relative; float: right; margin-top: 5px;">Email Duplication check</button>

但我发现当我删除 button 的整个 style 属性时，电子邮件检查按钮可以工作

<button type="button" class="btn btn-secondary" onclick="checkEmailDuplication()">Email Duplication check</button>

这不奇怪吗？ 我应该如何解决这个问题？我需要一些帮助。

谢谢。

Answer 1

包含注册按钮的 div 与 checkEmailDuplication 按钮重叠。不要只为注册按钮添加上边距，而是为包含它的 div 添加上边距来解决这个问题：

<div class="mt-5 col text-center">
    <button type="button" id="signup-button" class="btn btn-primary" style="position: relative; text-align: center; margin-top: 50px">
    Register!
</button>
</div>

编辑：更简洁的解决方案可能是将包含 checkEmailDuplication 按钮的 div 的 div 底部边距从 md-3 更改为 md-5。