Question

It’s becoming increasingly more and more difficult to find advice on how to use javascript outside of various frameworks. This is somewhat infuriating…. but whatever.

I want to extend a div via prototype, tacking on a bunch of extra functionality, in pseudo code, I’m hoping to do the following…

<div id="wrapperDiv">
  <div id="buttonDiv"/>
</div>

<script>
function ExtraFeatures(){
  this.clickMyButton = function(){
     alert("clicked");
  }
  //the idea here is that **this** will reference the div itself after the prototype is set
  this.childNodes[1].onClick = this.clickMyButton;//
}

var wrapperDiv = document.getElementById("wrapperDiv");
wrapperDiv.prototype = new ExtraFeatures;

//so, here I call it manually, but it's also been set as the onclick callback in the child div
wrapperDiv.clickMyButton();

</script>

I’m pretty sure this is possible, but the above code is not doing what I want it to do.

TIA.

Answer 1

A prototype is used before an object is created and the new object is created from the prototype. Once the object exits, you have to just add methods/properties to it. So, if you want to add methods to a DOM object, you can just add them in a function.

I would suggest this instead:

addMyExtraFeatures(obj) {
    obj.clickMyButton = function () {
        alert("clicked");
    }
  //the idea here is that **this** will reference the div itself after the prototype is set
  obj.childNodes[1].onClick = obj.clickMyButton;//
}

var wrapperDiv = document.getElementById("wrapperDiv");
addMyExtraFeatures(wrapperDiv);

//so, here I call it manually, but it's also been set as the onclick callback in the child div
wrapperDiv.clickMyButton();