My addeventListener not working on click with a button-CodePudding

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" >
<div >
    <div >
        <img src="https://i.ibb.co/JvXP8rW/phone.png">
    </div>
    <div >
        <form action="index.html" >
            <img src="https://i.ibb.co/H4f3Hkv/profile.png">
            <h2 >Welcome</h2>
            <div >
                <div >
                    <i ></i>
                </div>
                <div >
                    <h5>Username</h5>
                    <input type="text" >
                </div>
            </div>
            <div >
                <div >
                    <i ></i>
                </div>
                <div >
                    <h5>Password</h5>
                    <input type="password" >
                </div>
            </div>
            <button id="send" >Login <i ></i></button>
            <!--  <a href="#">Forgot Password?</a>-->
        </form>
    </div>
</div>

CodePudding user response：

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" >
<div >
    <div >
        <img src="https://i.ibb.co/JvXP8rW/phone.png">
    </div>
    <div >
        <form action="index.html" >
            <img src="https://i.ibb.co/H4f3Hkv/profile.png">
            <h2 >Welcome</h2>
            <div >
                <div >
                    <i ></i>
                </div>
                <div >
                    <h5>Username</h5>
                    <input type="text" >
                </div>
            </div>
            <div >
                <div >
                    <i ></i>
                </div>
                <div >
                    <h5>Password</h5>
                    <input type="password" >
                </div>
            </div>
            <button type="button" id="send" >Login <i ></i></button>
            <!--  <a href="#">Forgot Password?</a>-->
        </form>
    </div>
</div>

CodePudding user response：

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" >
<div >
    <div >
        <img src="https://i.ibb.co/JvXP8rW/phone.png">
    </div>
    <div >
        <form action="index.html" >
            <img src="https://i.ibb.co/H4f3Hkv/profile.png">
            <h2 >Welcome</h2>
            <div >
                <div >
                    <i ></i>
                </div>
                <div >
                    <h5>Username</h5>
                    <input type="text" >
                </div>
            </div>
            <div >
                <div >
                    <i ></i>
                </div>
                <div >
                    <h5>Password</h5>
                    <input type="password" >
                </div>
            </div>
            <button id="send" >Login <i ></i></button>
            <!--  <a href="#">Forgot Password?</a>-->
        </form>
    </div>
</div>