检查是否使用javascript按下按钮答案

【问题标题】：Check if button is pressed using javascript检查是否使用javascript按下按钮
【发布时间】：2020-06-28 21:19:52
【问题描述】：

这是我的 HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Contact V17</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
    <link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>


    <div class="container-contact100">
        <div class="wrap-contact100">
            <form method="POST" action="/student" class="contact100-form validate-form">
                <span class="contact100-form-title">
                    STUDENT LOGIN
                </span>

                <label class="label-input100" for="phone">Enter your Student Number*</label>
                <div class="wrap-input100">
                    <input id="Sid" class="input100" type="text" name="Sid" placeholder="Eg: 957">
                    <span class="focus-input100"></span>
                </div>

                <label class="label-input100" for="email">Enter Password*</label>
                <div class="wrap-input100 ">
                    <input id="Password" class="input100" type="password" name="Password" placeholder="Password">
                    <span class="focus-input100"></span>
                </div>

                <div class="container-contact100-form-btn" class="label-input100">
                <button type="submit" id="login" class="contact100-form-btn" >
                        LOGIN 
                    </button>

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <button type="submit" id="signup" class="contact100-form-btn">
                        SIGN UP
                    </button> 
                </div>
            </form>

            <div class="contact100-more flex-col-c-m" style="background-image: url('images/bg-01.jpg');">
                <div class="flex-w size1 p-b-47">
                    <div class="txt1 p-r-25">
                        <span class="lnr lnr-map-marker"></span>
                    </div>

                    <div class="flex-col size2">
                        <span class="txt1 p-b-20">
                            Address
                        </span>

                        <span class="txt2">
                            Anna University,Chennai
                        </span>
                    </div>
                </div>

                <div class="dis-flex size1 p-b-47">
                    <div class="txt1 p-r-25">
                        <span class="lnr lnr-phone-handset"></span>
                    </div>

                    <div class="flex-col size2">
                        <span class="txt1 p-b-20">
                            Lets Talk
                        </span>

                        <span class="txt3">
                            +91 9789404492
                        </span>
                    </div>
                </div>

                <div class="dis-flex size1 p-b-47">
                    <div class="txt1 p-r-25">
                        <span class="lnr lnr-envelope"></span>
                    </div>

                    <div class="flex-col size2">
                        <span class="txt1 p-b-20">
                            General Support
                        </span>

                        <span class="txt3">
                            contact@hostel_annaUniv.com
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div id="dropDownSelect1"></div>

<!--===============================================================================================-->
    <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/bootstrap/js/popper.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/select2/select2.min.js"></script>
    <script>
        $(".selection-2").select2({
            minimumResultsForSearch: 20,
            dropdownParent: $('#dropDownSelect1')
        });
    </script>
<!--===============================================================================================-->
    <script src="vendor/daterangepicker/moment.min.js"></script>
    <script src="vendor/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
    <script src="vendor/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
<script src="my_js/student.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-23581568-13"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-23581568-13');
    </script>
    <script src="https://npmcdn.com/js-alert/dist/jsalert.min.js"></script>

    <!-- <script src="my_js/rc_login.js"></script> -->



</body>
</html>

我想知道是否有人使用外部 javascript 文件按下了登录或注册按钮。这是我尝试过但没有用的代码。我也尝试使用控制台日志而不是警报，但仍然无法得到正确的答案。我可以弄清楚它进入表单的 eventlistener 函数但不能进入函数内部。学生.js



const Form = document.querySelector('form')



Form.addEventListener('submit',(e) =>{
   document.getElementById('login').onclick = function() {
   alert("button was clicked");
};

document.getElementById('sign_up').onclick = function() {
   alert("button was clicked");
};
})

【问题讨论】：

那么你为什么要在提交中竞标点击事件？点击已经发生。
@epascarello 我也试过把它放在外面，可惜没用 :(

标签： javascript html forms authentication

【解决方案1】：

在提交之外绑定事件

let btnClicked = null

const clicked = (event) => {
  btnClicked = event.target.id
}

document.getElementById('login').addEventListener('click', clicked)
document.getElementById('sign_up').addEventListener('click', clicked)

const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
  e.preventDefault()
  console.log(btnClicked)  
})

<form>
  <button id="login">Login</button>
  <button id="sign_up">sign up</button>
</form>

【讨论】：