I am facing a challenge while developing my website. I want to trigger an alert when the "register-selection" is clicked, but despite trying both Jquery and vanilla Javascript, I have not been successful. Even after searching online resources and ChatGPT for a solution, I haven't found one yet. Can someone help me solve this issue?
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33515c5c47404741524373061d001d01">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0f14091408">[email protected]</a>/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>