CODEWITHSUNDEEP
javascript
HelloWorld
HelloWorld

Reputation: 11249

Set a click event on a prototype function

I set a method on an objects prototype. I want the function to run when a button is clicked (the button is in the dom, with an id of 'step')

GoL.prototype.step = function () { // ...

I would to get GoL.prototype.step to execute the code below whenever the button is clicked. How would I go about setting a click event on the prototype method 'step'?

Upvotes: 1

Views: 4790

Answers (2)

HMR
HMR

Reputation: 39330

A good point was raised by Codey in the comments.

I'm struggling to figure out where to put this in my code.

The best place would be in a file/object that defines the DOM interaction and is responsible for getting/setting DOM values and react to user input.

This because you know where to find DOM dependent code when you plan to change the UI or decide to change/use a library like jQuery and need to re factor this code.

You can only get elements and add/set event handlers to it when the element is there so trying to set event handlers in code that is immediately run and added in the <head> section would not work.

I usually add code that needs dom elements to be there directly above the closing </body> tag. You can add it earlier like directly after the element that you're interested in.

A DOM dependent object could look something like this:

<!DOCTYPE html>
<html>
<head>
    <title>Test page for DomDependent</title>
</head>
 <body>
     <input type="button" data-click="button was clicked" value="click me">
     <input type="button" value="does not log, no data-click">
     <select data-change="select value changed">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
     </select>
  <script>
    //all code interacting with DOM should go here
    var DomDependent = {
      init:function(){
        document.body.onclick=DomDependent.click;
        //change may not bubble/propagate in <IE9
        document.body.onchange=DomDependent.change;
        //dynamically add element(s), because the handler is on
        //  document this element will still trigger the event
        var txt=document.createElement("input");
        txt.type="text";
        //set data-change attribute because we want something 
        //  done when it changes
        txt.setAttribute("data-change","txt changed");
        document.body.appendChild(txt);
      },
      getEvent:function(e){
        //for IE
        return e || window.event;
      },
      click:function(e){
        e = DomDependent.getEvent(e);
        var todo=e.target.getAttribute("data-click");
        //only do something if data-click is defined (see html)
        if(todo){
          //You could trigger an event in a mediator object here
          //  in this example we use data-click to define what 
          //  needs to be done
          console.log("something needs to be done, ",
            todo,"the element:",e.target);
        }
      },
      change:function(e){
        e = DomDependent.getEvent(e);
        var todo=e.target.getAttribute("data-change");
        //only do something if data-change is defined (see html)
        if(todo){
          console.log("something needs to be done, ",
            todo,"the element:",e.target);
        }
      }
    };
    DomDependent.init();
  </script>
</body>
</html>

Upvotes: 0

rvighne
rvighne

Reputation: 21917

Simply create an instance of GoL and then bind a click handler to the "step" button.

var instanceOfGoL = new GoL(); // only you know how to correctly initialize this
var button = document.getElementById('step');
button.addEventListener('click', function () {
    instanceOfGoL.step();
});

You need to wrap it in a function and use .call() because the event handler strips the member function of scope, and you need to fill it back in.

There was no need to provide the code for the proto function, your question isn't really related to it.

Upvotes: 2

Related Questions