javascript event-driven class

Question

javascript event-driven class

I'm facing a challenge in creating a class with chained functions, and I could really use some assistance. Currently, this is what I have:

robin = new batman("myiv");
var batman = (function() {
    var me = this;
    function batman(id){
        me._id=id;
        document.getElementById(id).addEventListener('mousemove', me.mouseMoving.bind(me),true);
    }
    this.mouseMoving = function(){
        document.getElementById(me._id).style.background="orange";
    }

    return batman;
}

This pseudo code outlines my desired outcome. Essentially, I want to input the ID of an element in my HTML and be able to chain functions like onclick etc., allowing the specified code inside those functions to execute – for example, changing background colors.

Is this achievable?

superman("mydiv"){
    .onmouseover(){
        document.getElementById(the_id).style.background="#ffffff";
    },
    .onmouseout(){
        document.getElementById(the_id).style.background="#000000";
    },
    etc...
}

Edit: included missing code: "return batman;"

javascript class

Answer 1

Answer №1

To utilize method chaining, simply return the current object by using this keyword

var YourClass = function () {
  this.items = [];
  this.push = function (item) {
    if (arguments) {
      this.items.push(item);
    }
    return this;
  }
  this.count = function () {
    return this.items.length;
  }
}

var obj = new YourClass();
obj.push(1).push(1);
console.log(obj.count())

See a working example at:

https://stackblitz.com/edit/method-chaining-example?file=index.js

Answer 2

To utilize method chaining, simply return the current object by using this keyword

var YourClass = function () {
  this.items = [];
  this.push = function (item) {
    if (arguments) {
      this.items.push(item);
    }
    return this;
  }
  this.count = function () {
    return this.items.length;
  }
}

var obj = new YourClass();
obj.push(1).push(1);
console.log(obj.count())

See a working example at:

https://stackblitz.com/edit/method-chaining-example?file=index.js

javascript event-driven class

Answer №1

Similar questions

Why am I experiencing a problem with my ajax call only working once when I submit forms that are rendered with @Html.Render

Is the ctx.arc method in Javascript able to determine the vertices based on the pixel size and radius?

Building a conditional statement in React based on the URL path: A beginner's guide

Is there a way to change the entire background color of my popover?

Is there a way to dynamically convert a css rule like "select::-ms-expand" to JavaScript?

How to choose elements using jQuery according to their CSS properties?

Encountering a problem with npm reading dependencies

Using jQuery, adjust the width of child elements within a container by applying dynamic CSS styling

Tips for showcasing personalized validation alerts with jQuery in the HTML5 format?

How can I repeatedly trigger an eventListener in JavaScript?

Fetching data from Page 1 and passing it to Page 2 using Javascript

Discovering the technique to unearth a specific value within an array nested within another array

What are the steps to customize the date pipe in Angular?

Tips for transferring POST body data to a different route without losing any information

Struggling to get Axios working in Node despite having it properly installed

Tips for attaching event listeners to custom elements

Having trouble getting a Three.js invisible plane to work correctly with raycaster.intersectObject?

JavaScript - Dynamic rotation algorithm

What mistakes did I make in my Ajax code?

Adding an image to a select option in HTML using PHP - A step-by-step guide