My addeventListener not working on click with a button

Omar Zaghdane 0
Viewed 30

Hello i have a login page and i want to when you click the button "login" it prints a message in the console but here it doesn't detect the button "login" i put query selector and took the class html:

 const inputs=document.querySelectorAll(".input");
let submit=document.querySelector(".btn");

submit.addEventListener('click' ,()=>{
console.log("test")
})
<img src="https://i.ibb.co/XWdPc2X/wave-01.png" class="wave">
<div class="container">
    <div class="img">
        <img src="https://i.ibb.co/JvXP8rW/phone.png">
    </div>
    <div class="login-content">
        <form action="index.html" class="form-login">
            <img src="https://i.ibb.co/H4f3Hkv/profile.png">
            <h2 class="title">Welcome</h2>
            <div class="input-div one">
                <div class="i">
                    <i class="fas fa-user"></i>
                </div>
                <div class="div">
                    <h5>Username</h5>
                    <input type="text" class="input">
                </div>
            </div>
            <div class="input-div pass">
                <div class="i">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="div">
                    <h5>Password</h5>
                    <input type="password" class="input">
                </div>
            </div>
            <button id="send" class="btn btn-success mt-5">Login <i class="fa fa-long-arrow-right ml-2 mt-1"></i></button>
            <!--  <a href="#">Forgot Password?</a>-->
        </form>
    </div>
</div>

dom javascript html
2 Answers

The issue is that the default type for a button is submit, so when you click the button, it attempts to redirect. Change the button's type to button to get your callback behavior.

document.querySelector(".btn").addEventListener('click' ,()=>{
  console.log("test")
})
<img src="https://i.ibb.co/XWdPc2X/wave-01.png" class="wave">
<div class="container">
    <div class="img">
        <img src="https://i.ibb.co/JvXP8rW/phone.png">
    </div>
    <div class="login-content">
        <form action="index.html" class="form-login">
            <img src="https://i.ibb.co/H4f3Hkv/profile.png">
            <h2 class="title">Welcome</h2>
            <div class="input-div one">
                <div class="i">
                    <i class="fas fa-user"></i>
                </div>
                <div class="div">
                    <h5>Username</h5>
                    <input type="text" class="input">
                </div>
            </div>
            <div class="input-div pass">
                <div class="i">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="div">
                    <h5>Password</h5>
                    <input type="password" class="input">
                </div>
            </div>
            <button type="button" id="send" class="btn btn-success mt-5">Login <i class="fa fa-long-arrow-right ml-2 mt-1"></i></button>
            <!--  <a href="#">Forgot Password?</a>-->
        </form>
    </div>
</div>

Scott Marcus0

Use document.getElementById selector to get element and add function onClick

const btn = document.getElementById('send');

    btn.onclick = () => {
      console.log('here');
      // do something
    }
<img src="https://i.ibb.co/XWdPc2X/wave-01.png" class="wave">
<div class="container">
    <div class="img">
        <img src="https://i.ibb.co/JvXP8rW/phone.png">
    </div>
    <div class="login-content">
        <form action="index.html" class="form-login">
            <img src="https://i.ibb.co/H4f3Hkv/profile.png">
            <h2 class="title">Welcome</h2>
            <div class="input-div one">
                <div class="i">
                    <i class="fas fa-user"></i>
                </div>
                <div class="div">
                    <h5>Username</h5>
                    <input type="text" class="input">
                </div>
            </div>
            <div class="input-div pass">
                <div class="i">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="div">
                    <h5>Password</h5>
                    <input type="password" class="input">
                </div>
            </div>
            <button id="send" class="btn btn-success mt-5">Login <i class="fa fa-long-arrow-right ml-2 mt-1"></i></button>
            <!--  <a href="#">Forgot Password?</a>-->
        </form>
    </div>
</div>

AndresSkeetch0
Related