OnClick EventListener not working in my code

  Kiến thức lập trình

I am trying to execute code when a button is pressed. I currently have the “catch all” alert set up.

My HTML code

<body  style="overflow:hidden;" >
   <div class="addCustomerMain main">
      <h1>Add Customer</h1>
      <hr>
      <form method="post" id="addCustomer">
         <div class="formContent">
            <div class="formElement">
               <label for="custName">Name</label>
               <input class="txtLarge" type="text" name="custName" id="custName">
            </div>
         </div>
         <div class="formContent">
            <div class="formElement">
               <label for="custAddress">Address</label>
               <input class="txtLarge" type="text" name="custAddress" id="custAddress">
            </div>
         </div>
         <div class="formContent">
            <div class="formElement">
               <label for="custCity">City</label>
               <input class="txtSmall" type="text" name="custCity" id="custCity">
            </div>
            <div class="formElement">
               <label for="custState">State</label>
               <input class="txtXSmall" type="text" name="custState" id="custState">
            </div>
            <div class="formElement">
               <label for="custZip">Zip</label>
               <input class="txtXSmall" type="text" name="custZip" id="custZip">
            </div>
         </div>
         <div class="formContent">
            <div class="formElement">
               <label for="custPhone">Phone</label>
               <input type="text" name="custPhone" id="custPhone" class="txtLarge">
            </div>
         </div>
      </form>
      <div class="formContent" id="divCheckInSubmit">
         <div class="formElement">
            <button id="btnCheckInSubmit" class="btnSubmit">Add Customer</button>
         </div>
      </div>
   </div>
   <script src="../js/addCustomer.js" defer></script>
</body>

My Javascript

$(document).ready(function() {
    //bulk submit handler This section works when this form is shown.  In this instance, I have the form
    //I currently have the form hidden
    $("#bulkSubmit").submit(function(e) {
        e.preventDefault();

        var form = $(this);
        var frmUrl = form.attr('action')

        $.ajax({
            type: "POST",
            url: frmUrl,
            data: form.serialize()
        });
    });


});

addButton = document.getElementById('btnCheckInSubmit');
addButton.addEventListener("click", function() {
    alert("clicked");
});

The code I want to work, works if I comment out the JQuery for the bulksubmit, but if it is still in there, the checkinsubmit button’s eventlister for “click” does not fire.

New contributor

D B is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT