How can I add a click event to a button I'm building in javascript?

Question

I have this function:

var ButtonChoice = function(key, type, img, label){
this.key = key;
this.type = type;
this.img = img;
this.label = label;
this.getButton = function(){
 return "<img src='img/" + this.img + "' type='" + this.type + "' id='" + 
         this.key + "' class='ButtonsChoice' description='" + this.label + 
         "' />" 
 };
};

And I need to add click function to this images. My question is how to do that?

Add it to the DOM first, then with a reference to the `Element` you can invoke `element.addEventListener('click', function () { // do something });` — Matt, Jun 29 '17 at 08:54
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Liam, Jun 29 '17 at 08:58

cнŝdk · Answer 1 · 2017-06-29T09:10:59.583

Instead of creating the image as a HTML string you can just create it dynamically using JavaScript, this will allow you to attach the click event dynamically using onclick.

This is how should be your code:

var ButtonChoice = function(key, type, img, label) {
  this.key = key;
  this.type = type;
  this.img = img;
  this.label = label;
  this.getButton = function() {
    var image = document.createElement("img");
    image.src = "img/" + this.img;
    image.type = this.type;
    image.id = this.key;
    image.className = "ButtonsChoice";
    image.description = this.label;
    image.onclick = function(){
        //Put your code here
    }
    return image;
  };
};

Note:

I don't see why you are using a type attribute for your images, type attribute is generally used with inputs and buttons, please check the MDN HTML attribute reference table for more details.

Hhhhh @Liam yes this is the most basic and reasonable way to do it. — cнŝdk, Jun 29 '17 at 09:04

score 0 · Answer 2 · answered Jun 29 '17 at 08:58

0

Just add onclick function to your returned value:

 return "<img src='img/" + this.img + "' type='" + this.type + "' id='" + 
         this.key + "' class='ButtonsChoice' description='" + this.label + 
         "' onclick='yourFunc();' />"

answered Jun 29 '17 at 08:58

kleinohad

5,800
2
26
34

While this would work, it's very old-school and generally recommended that you don't use `onclick=` – freedomn-m Jun 29 '17 at 09:00

score -1 · Answer 3 · answered Jun 29 '17 at 08:55

-1

Add this event listener to a document.ready() event listener:

$('.ButtonsChoice').click(function(e){
    ... do something ...
});

Of course, this treats all button the same that have that class...

answered Jun 29 '17 at 08:55

Alister Cameron

86
4

This will likely not work. The fact that `ButtonChoice` is a function *implies* it will be called after document ready. So you'd need event delegation. – freedomn-m Jun 29 '17 at 08:58
this won't work as the button is dynamically created, you'd need to use on and event delegation – Liam Jun 29 '17 at 08:59

score -1 · Answer 4 · answered Jun 29 '17 at 09:02

-1

you can do it this way,

<img src="example.gif" onclick="a('hello')">

in the above line inside the img tag add a onclick event which will invoke a function a(value)

answered Jun 29 '17 at 09:02

Deepak Pandey

618
7
19

How can I add a click event to a button I'm building in javascript?

4 Answers4