0

I need to pass parameter from HTML to the JS function. I can't set unique id, because elements are in loop. So it looks like this:

   @foreach ($meals as $meal)
       <button class="btn btn-primary" onclick="addToCart('{{ $meal->id }}')">
   @endforeach

But in calling function, I need access both to input parameter and event caller:

        let addToCart = (id, caller) => {
            console.log(id);
            console.log(caller);
        }

I tried to put this as second parameter, when calling function:

<button class="btn btn-primary" onclick="addToCart('{{ $meal->id }}', this)">

Well, it works, but my next task is to replace event caller with some other DOM element, using JQuery.

        let addToCart = (id, caller) => {
            caller.replaceWith("<h1>helloworld</h1>");
        }

Unfortunately that replaces event caller with that, only as innerHTML of parent element, without interacting with tags. So, I'm getting smthing like this:

enter image description here

What can I do in that case?

UPD: I'm getting this: enter image description here

But I need THIS: enter image description here

3
  • to answer the question in your title it was as easy as doingwindow.event.target or window.event.currentTarget (this second option is safer in case the event will bubble to the parent). You solved anyway passing this when invoking the handler. But the final issue is unclear. Your handler literally replaces the event target (the button firing the click event) with a custom html and it behaves as expected.
    – Diego D
    Nov 7, 2022 at 9:33
  • "Unfortunately that replaces event caller with that, only as innerHTML of parent element, without interacting with tags. So, I'm getting smthing like this" ... this part is very confusing. What did you mean to do instead? how did you expect your event target to change?
    – Diego D
    Nov 7, 2022 at 9:33
  • @DiegoD Thanks for your answer. Updated the question, hope it makes clearer, what I need to achieve. Nov 7, 2022 at 9:49

1 Answer 1

1

In case you meant to replace the button that fired the click event with a different html object instead of just replacing its text content like you did in your example, the key was using replaceWith on a jQuery object instead of calling it from an HTMLDocument.

The difference between https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceWith and https://api.jquery.com/replacewith/

So to force the invocation from the jQuery object, just use $(caller)

let addToCart = (id, caller) => {
    $(caller).replaceWith( "<h1>helloworld</h1>" );      
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-primary" onclick="addToCart('id', this)">click to replace</button>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.