How to use onclick event in JavaScript?

Question

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.

If you're using jQuery, why don't you use jQuery event binding, instead of assigning to .onclick? — Barmar
– Barmar, Commented Feb 16, 2022 at 22:40
because function offDaumZipAddress() is out of <script> ..... </script> — Mister Jojo
– Mister Jojo, Commented Feb 16, 2022 at 22:41
Hi, @Barmar. I'm new to JavaScript, so I don't know about jQuery event binding 🤣 . I saw a window slide using that Jquery in another tutorial and tested it on my website and it worked well. So I try to apply this in a different way, but it doesn't work. — cheonmu
– cheonmu, Commented Feb 16, 2022 at 22:44
Hi, @MisterJojo I tried put that function into script, but still not working. — cheonmu
– cheonmu, Commented Feb 16, 2022 at 22:46

Barmar · Accepted Answer · 2022-02-16 22:48:41Z

1

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

newImg.onclick = offDaumZipAddress;

answered Feb 16, 2022 at 22:48

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark Schultheiss · Accepted Answer · 2022-02-16 23:44:22Z

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>

Collectives™ on Stack Overflow

How to use onclick event in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related