Passing the being looped element to event handler

Question

How do I pass the element that is being loop to event handler.

foo.hbs

<div>
    {{#each products}}
        // some html code
        <p>{{this}}</p>                            <!-- output product object -->
        <button onclick="foo(this)">Add</button>   <!-- output button object-->
        <button onclick="foo({{this._id}})">Add</button>   <!-- uncaught syntax error -->

    {{/each}}
</div>

<script type="text/javascript">
    function foo(product) {
        console.log(product);
    }
</script>

The above code: product argument gives me the HTMLButton instead of product of current iteration.

Question: How do I pass product instead of button element to the handler?
I'm using express-handlerbars.

Plaute · Answer 1 · 2017-04-19T07:13:46.900

0

You can try :

this.parentNode

which refers to html parent.

and in your function:

console.log(product.id);

console.log(typeof(product)); //display object

Console print html, but product is object you sent from onclick. So you can access to any related properties.

Hope it can help.

edited Apr 19 '17 at 07:13

answered Apr 18 '17 at 15:29

Plaute

4,669
2
17
19

The result is
, how do I get product?
– Sithideth Bouasavanh Apr 18 '17 at 16:17
Have you html version officielle code ? Your production must have an id, cet id. – Plaute Apr 18 '17 at 16:45
There is an id. Once I can access product, I can access any property of product. The problem is I don't know how to get the product object. – Sithideth Bouasavanh Apr 18 '17 at 18:10
I tried `{{this._id}}`, it yields `product._id` in DOM inspection. However, I got `uncaught syntax error`. – Sithideth Bouasavanh Apr 19 '17 at 10:33

Passing the being looped element to event handler

1 Answers1