I am making a website and I want to display an alert if the "register-selection" is clicked. But I can't do it. Firstly; I tried to do it with Jquery but it did not work. After that; I tried it with the vanilla Javascript. But it did not work either. I tried to find the solution on the web and ChatGPT but I couldn't find it again. How can I solve my Problem ?
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>
Just add in the addEventlistener the alert() function as below. Also if you want to change the color of your button use RegisterButton.style.backgroundColor="red" I also edited the answer if you want to change the color of h1 title in #register-selection