为什么我无法点击bootstrap和JS中的“注册选择”？

Question

我正在制作一个网站，我想在单击“注册选择”时显示警报。但我做不到。首先;我尝试用 Jquery 来实现，但没有成功。在那之后;我用普通的 Javascript 尝试过。但它也不起作用。我试图在网络和 ChatGPT 上找到解决方案，但我再也找不到了。我该如何解决我的问题？

var RegisterButton=document.getElementById("register-selection");


    RegisterButton.addEventListener("click",function(){
        RegisterButton.style.color="red";
    })

body{
    background-color: #0A0A0A !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 6rem;
}


#register-login-selection{
    padding-top: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 5rem;
    word-break: break-all;
}


#register-selection{
    width: 15%;
    text-align: center;
    cursor: pointer;
    word-break: break-all;
}


#register-selection>h1{
    color: #FFF08D;
}



#login-selection{
    width: 15%;
    text-align: center;
    cursor: pointer;
    word-break: break-all;
}


#login-selection>h1{
    color: #FFF08D;
}

#login-form{
    width: 30%;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;
    background-color: #0A0A0A;
    border: 0.1rem solid #292929;
}

label{
    color: #FFF08D;
}

input{
    background-color: #0A0A0A !important;
    border-color: #292929 !important;
    color: #6b6b6b !important;
}

.form-group{
    padding-bottom: 2em;
}

button{
    background-color: #FFF08D !important;
    color: #0A0A0A !important;
    border-color: #FFF08D !important;
}


button:hover{
    background-color: #1A1A1A !important; 
    color: #FFF !important;
}


#register-form{
    width: 30%;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;
    display: none;
    background-color: #0A0A0A;
    border: 0.1rem solid #292929;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<div id="register-login-selection" class="container-fluid">
    <div id="register-selection" class="">
        <h1>Register</h1>
    </div>
    <div id="login-selection" class="">
        <h1>Log In</h1>
    </div>
</div>



<form id="login-form">
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>


<form id="register-form">
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary">asd</button>
</form>

Answer 1

只需在 addEventlistener 中添加alert()函数即可，如下所示。

var RegisterButton=document.getElementById("register-selection");


    RegisterButton.addEventListener("click",function(){
        alert('you clicked register-selection')
        RegisterButton.style.color="red";
    })
    

body{
    background-color: #0A0A0A !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 6rem;
}


#register-login-selection{
    padding-top: 15rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 5rem;
    word-break: break-all;
}


#register-selection{
    width: 15%;
    text-align: center;
    cursor: pointer;
    word-break: break-all;
}


#register-selection>h1{
    color: #FFF08D;
}



#login-selection{
    width: 15%;
    text-align: center;
    cursor: pointer;
    word-break: break-all;
}


#login-selection>h1{
    color: #FFF08D;
}

#login-form{
    width: 30%;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;
    background-color: #0A0A0A;
    border: 0.1rem solid #292929;
}

label{
    color: #FFF08D;
}

input{
    background-color: #0A0A0A !important;
    border-color: #292929 !important;
    color: #6b6b6b !important;
}

.form-group{
    padding-bottom: 2em;
}

button{
    background-color: #FFF08D !important;
    color: #0A0A0A !important;
    border-color: #FFF08D !important;
}


button:hover{
    background-color: #1A1A1A !important; 
    color: #FFF !important;
}


#register-form{
    width: 30%;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;
    display: none;
    background-color: #0A0A0A;
    border: 0.1rem solid #292929;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<div id="register-login-selection" class="container-fluid">
    <div id="register-selection" class="">
        <h1>Register</h1>
    </div>
    <div id="login-selection" class="">
        <h1>Log In</h1>
    </div>
</div>



<form id="login-form">
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>


<form id="register-form">
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary">asd</button>
</form>