Learning the process of connecting functions to events

Question

Learning the process of connecting functions to events

    // param {id:'buttonId', action : function(event[,param1, param2] ){}, behavior:function(event[,param1, param2] ){} }
    CustomButton = function(parameters) {
         var buttonElement = document.getElementById(parameters.id);
         // how can I utilize the passed action function from 
         // parameters and include additional parameters like function(event[,param1,param2]) 
         buttonElement.onclick = parameters.action;
    }

I am currently working on creating a customized toggle button that functions as a link. I would like to be able to add events as described above but I am struggling with implementing them for the buttons in order to use code similar to the example below:

new CustomButton({id: 'button1', "action" :  function(event, parameter1, parameter2){ 
        //function body 
    }
});

javascript dom-events

Answer 1

Answer №1

If I were to tackle this task, here's how I would approach it:

<a href="foo.html" id="toggle1">Toggle</a>


var ToggleButton = function(params) {
    var btn  = document.getElementById(params.id);
    var evt  = 'on' + params.evt;
    btn[evt] = params.action;    
    return;
}

ToggleButton({
    id:      'toggle1',
    evt:     'click',
    action:  function(evt){
        var clickedElement = this;
        alert('The href value of the element is '+ clickedElement.getAttribute('href'));

        // To prevent the browser from following the href link
        var e = evt || window.event;
        e.preventDefault();
    }
});

Answer 2

If I were to tackle this task, here's how I would approach it:

<a href="foo.html" id="toggle1">Toggle</a>


var ToggleButton = function(params) {
    var btn  = document.getElementById(params.id);
    var evt  = 'on' + params.evt;
    btn[evt] = params.action;    
    return;
}

ToggleButton({
    id:      'toggle1',
    evt:     'click',
    action:  function(evt){
        var clickedElement = this;
        alert('The href value of the element is '+ clickedElement.getAttribute('href'));

        // To prevent the browser from following the href link
        var e = evt || window.event;
        e.preventDefault();
    }
});

Answer 3

Answer №2

Here are the steps you can take:

CreateToggleButton = function( config) {
      var control = document.getElementById( config.id);
      if ( control) {
         control.onclick = config.handler;
      }
}

Answer 4

Here are the steps you can take:

CreateToggleButton = function( config) {
      var control = document.getElementById( config.id);
      if ( control) {
         control.onclick = config.handler;
      }
}

Learning the process of connecting functions to events

Answer №1

Answer №2

Similar questions

I'm encountering an issue with my API Key being undefined, despite having it saved in both an .env file and as a global variable

The jQuery form submission functionality fails to execute properly in the presence of a callback function

What is the best way to create a function that will return a Promise within an Express Route?

Utilize data obtained from an ajax request located in a separate file, then apply it within a local function

Unable to locate module '.next/server/font-manifest.json'

Leveraging AngularJS for retrieving the total number of elements in a specific sub array

a function that is not returning a boolean value, but rather returning

In order to achieve a sliding effect for the second div, it can be programmed to

Leverage recursion for code optimization

Manipulating elements with JavaScript to remove them, while ensuring that the empty space is automatically filled

Unleashing the Power: Crafting Impeccable For Loops

I was disappointed by the lackluster performance of the DataTable in CodeIgniter; it did not

Creating a switch statement that evaluates the id of $(this) element as a case

Using Node Express.js to access variables from routes declared in separate files

The conversion from CSV to JSON using the parse function results in an inaccurate

Tips for applying a custom design to your MUI V5 styled component

Navigating with React Router using server-side routing in the web browser

Trigger Javascript on 'Nearby' input from Html form

Displaying a specific division solely on mobile devices with jQuery

Distributing utility functions universally throughout the entire React application