"Same as Shipping" check box isn't working. My code is attached, what am I missing? {JavaScript code only; html posted for reference}

Question

I'm trying to copy all data from a 'shipping' address over to the 'billing' address section. I've provided all of my code, but for some reason nothing is copying over when the check box useShip is selected. The HTML code is provided for any reference, however I'm working entirely in javascript on this.

Please let me know what I've done wrong. Any advice or answer would be greatly appreciated!

Javascript:

"use strict";

let useShip = document.getElementById("useShip");
let lastnameBill = document.getElementById("lastnameBill");
let lastnameShip = document.getElementById("lastnameShip");

useShip.addEventListener("change", copyShippingToBilling);

function copyShippingToBilling() {
      let useShip = document.getElementById("useShip").checked;
      if (useShip.checked == true) {
            let firstnameBill = document.getElementById("firstnameBill");
            let firstnameShip = document.getElementById("firstnameShip");
            firstnameBill.value = firstnameShip.value;

            let lastnameBill = document.getElementById("lastnameBill");
            let lastnameShip = document.getElementById("lastnameShip");
            lastnameBill.value = lastnameShip.value;

            let address1Bill = document.getElementById("address1Bill");
            let address1Ship = document.getElementById("address1Ship");
            address1Bill.value = address1Ship.value;

            let address2Bill = document.getElementById("address2Bill");
            let address2Ship = document.getElementById("address2Ship");
            address2Bill.value = address2Ship.value;

            let cityBill = document.getElementById("cityBill");
            let cityShip = document.getElementById("cityShip");
            cityBill.value = cityShip.value;

            let countryBill = document.getElementById("countryBill");
            let countryShip = document.getElementById("countryShip");
            countryBill.value = countryShip.value;

            let codeBill = document.getElementById("codeBill");
            let codeShip = document.getElementById("codeShip");
            codeBill.value = codeShip.value;

            let stateBill = document.getElementById("stateBill");
            let stateShip = document.getElementById("stateShip");
            stateBill.selectedIndex === ShippingToBilling.selectedIndex;
      }
}

let formElements = document.querySelectorAll("input[type='text']");
let fieldCount = formElements.length;
let errorBox = document.getElementById("errorBox");
for (let i = 0; i < formElements.length; i++) {
      formElements[i].addEventListener('invalid', showValidationError);
}

function showValidationError(event) {
      event.preventDefault();
      errorBox.textContent = "Complete all highlighted fields";
}

HTML:




   
   
   HTML
   
   



   
      
      
   

   
      Checkout
      
         
            Shipping Address
            
               
               * — Required Field
               First Name *
               
               
               Last Name *
               
               
               Address Line 1 *
               
               
               Address Line 2  
               
               
               City *
                  
               
               State *
                                              

               Country *
                 
 
               Postal Code *
                               
            
         
         
         
            Billing Address
            
               
               
               Same as Shipping Address
               
               First Name *
               
               
               Last Name *
               
               
               Address Line 1 *
               
               
               Address Line 2  
               
               
               City *
                  
               
               State *
                                              

               Country *
                 
 
               Postal Code *

user_13086412 · Answer

Replace this:

useShip.addEventListener("click", copyShippingToBilling);

with:

useShip.addEventListener("change", copyShippingToBilling);

The reason is that checkboxes have "change" events instead of click events for change detection during events.

"Same as Shipping" check box isn't working. My code is attached, what am I missing? {JavaScript code only; html posted for reference}

1 Answers