Adding Onclick Element That not exist yet

Question

I Try to find a solution for a client but i wont get out.
The problem is that i cant edit the HTML, so i try to get a work-around with Javascript


<!-- This section must be hide in CSS or something --> 
                    <div class="coupon-container">
                        <input class="input-text" type="text" id="coupon_code" name="coupon_code" value="">
                                                <div class="btn-apply">
                            <button type="button" title="Toepassen" class="button-coupon medium" onclick="discountForm.submit(false)" value="Toepassen"><span><span>Toepassen</span></span></button>
                        </div>
                    </div><!-- end of section Hiding CSS --> 
                </div>

This is the HTML code and i want to add a

onclick="new_function();

OLD CODE <div class="coupon-container">

NEW CODE <div class="coupon-container" onclick="new_function();>

Is this possible? Keep in mind that i need a Javascript, so i cant edit the HTML directly from CMS.

I Hope you guys can help me out.

Kind regards

`document.querySelector('.coupon-container').addEventListener('click', new_function);` — , Mar 04 '20 at 16:35
Does this answer your question? [Add onclick event to newly added element in JavaScript](https://stackoverflow.com/questions/3316207/add-onclick-event-to-newly-added-element-in-javascript) — , Mar 04 '20 at 16:36

score 1 · Answer 1 · answered Mar 04 '20 at 16:35

1

You can do this.

document.getElementsByClassName("coupon-container")[0].setAttribute("onclick", "new_function();");

answered Mar 04 '20 at 16:35

DenverCoder1

2,253
1
10
23

Adding Onclick Element That not exist yet

1 Answers1