How to use dynamic golang html template id with javascript?

Question

Hi I have a html image button with dynamic id inside range in golang template. I need to add a javascript function to it. But the problem is that how could I use this dynamic Id in javascript?

My HTML

{{range $i, $e := .Process}}
   <input id="id{{.}}" type="image" src="/images/icons/pencil.png" alt="edit" width="15" height="15">
{{end}}

JavaScript

<script type="text/javascript">
       $().ready(function() {
            $('#id{{.}}').click(function() {
                $('#hidebody').toggle();

            });
        });
    </script>

How to solve this? Is there any better way to do this?

Aruna Herath · Accepted Answer · 2016-02-29 08:10:37Z

2

Give those buttons a class.

{{range $i, $e := .Process}}
   <input id="{{.}}" class="img-buttons" type="image" src="/images/icons/pencil.png" alt="edit" width="15" height="15">
{{end}}

In javascript you can do,

$(".img-buttons").click ( function() {
    $(this).attr( "id" ); // get Id
});

Instead of the id you can use html data attributes if that suits you better.

HTML:

{{range $i, $e := .Process}}
   <input data-id="{{.}}" class="img-buttons" type="image" src="/images/icons/pencil.png" alt="edit" width="15" height="15">
{{end}}

JS:

$(".img-buttons").click ( function() {
    $(this).data( "id" ); // get Id
});

edited Feb 29, 2016 at 8:10

answered Feb 29, 2016 at 8:05

Aruna Herath

6,5822 gold badges43 silver badges62 bronze badges

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

Collectives™ on Stack Overflow

How to use dynamic golang html template id with javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related