Question 3300 in Woocommerce Question posted in
The official Woocommerce documentation can be found here.

How to use onclick event in JavaScript? – Woocommerce

I’m trying to make a window that slide up when the X button(close.png) is clicked.

I added the Wrap element with JavaScript, and added an img element inside.

Then, I put following JavaScript, but there is no change when I press the X button.

<script>
    const parent3 = document.querySelector('#wrap');
    const billingField3 = document.querySelector('#woocommerce-input-wrapper');

    const newImg = document.createElement('img');
    newImg.setAttribute("src", "//t1.daumcdn.net/postcode/resource/images/close.png");
    newImg.setAttribute('id', 'btnFoldWrap');
    newImg.style.cssText = 'cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1';
    newImg.onclick = "offDaumZipAddress();"
    parent3.insertBefore(newImg, billingField3);
</script>


function offDaumZipAddress() {
        jQuery("#wrap").slideUp();
    }

Website structure is

<div class="woocommerce-billing-fields__field-wrapper">
   <p class="billing_postcode_find_field">..
       <span class="woocommerce-input-wrapper">...
       </span>
     </p>
  
   <div id="wrap" ..> 
        <img src="..."></img>
     </div> 
   
  <p class="billing_address_1_field">
        <span class="woocommerce-input-wrapper">

Checking with the console of chrome developer tools doesn’t show any errors.

Could someone please let me know what am I missing?

Thank you.

Tags:

2

Answers


  1. 0

    The value of the onclick property must be a function reference, not a JavaScript string.

    newImg.onclick = offDaumZipAddress;
    Login or Signup to reply.
  2. 0

    You have your answer; here is a working example of that loosely based on your code (so the inserted image actually shows, added some CSS etc. to illustrate)

    //gets first one of this type
const billingField3 = document.querySelector('.woocommerce-input-wrapper');
// Get a reference to the parent node/ gets first one of this type
const parent3 = billingField3.parentNode;
//console.log(parent3);
//console.log(billingField3);
// Create the new node to insert
const newImg = document.createElement('img');
newImg.setAttribute("src", "//t1.daumcdn.net/postcode/resource/images/close.png");
newImg.setAttribute('id', 'btnFoldWrap');
newImg.setAttribute('alt', 'folderWrap');
// no not this: newImg.style.cssText = 'cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1';
// this:
newImg.classList.add("inserted-image");
newImg.onclick = offDaumZipAddress;
//console.log("Thing:",newImg);

//console.log("HTML:", parent3.innerHTML);
parent3.insertBefore(newImg, billingField3);
//console.log("New HTML:", parent3.innerHTML);

function offDaumZipAddress() {
  console.log('here we go');
  jQuery("#wrap").slideUp();
}
    .billing_postcode_find_field {
  border: solid blue 1px;
  padding: 1rem;
}

.woocommerce-input-wrapper {
  border: solid 1px lime;
  padding: 1rem;
}

.inserted-image {
  cursor: pointer;
/* This is odd, makes it not clickable:
position: absolute;
  right: 0px;
  top: -1px;
  z-index: 1;*/
  border: solid 1px red;
  min-width: 1.5rem;
  min-height: 1.5rem;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woocommerce-billing-fields__field-wrapper">
  <p class="billing_postcode_find_field">..
    <span class="woocommerce-input-wrapper">...</span>
  </p>

  <div id="wrap">
    <img src="//t1.daumcdn.net/postcode/resource/images/close.png" alt="png"></img>
  </div>

  <p class="billing_address_1_field">
    <span class="woocommerce-input-wrapper"></span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search