我的addeventListener在單擊按鈕時不起作用

您好，我有一個登錄頁面，當您單擊“登錄”按鈕時，它會在控制臺中列印一條訊息，但在這里它沒有檢測到“登錄”按鈕，我放置了查詢選擇器并使用了類 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>

uj5u.com熱心網友回復：

問題是typea的默認button值為submit，因此當您單擊該按鈕時，它會嘗試重定向。將按鈕更改type為button以獲取您的回呼行為。

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>

uj5u.com熱心網友回復：

使用document.getElementById選擇器獲取元素并添加功能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>

標籤：javascript html dom

上一篇：我可以在Javascript中查詢從子項中選擇父項嗎？

下一篇：Github頁面作為靜態影像托管