JavaScript: Add to onlick event after its definition

Question

I have an html element that has an onClick() event defined from when it is created. Due to events that happen later in the code, I need to add to and not replace that `onClick()' event.

HTML elements in the project I am working on are created in hyperscript .

In the file in which the element is created:

            h('a.block-current',
            {
              onclick: ev => {
                this.clickResult();
              },
            },
            resultNode,
          ),

In another file, there is this variable that controlls user created slides. However, there are multiple items that have the classname a.block and I would like the variable update to apply to them all.

I have tried the following code:

const results = document.querySelectorAll('a.block');
results.onClick() {
   ....
}

but it overrides the previously defined onClick event

Answer 1

You could use addEventListener to achieve what you require as follows:

const results = document.querySelectorAll('a.block');

/* Iterate nodes of "results" NodeList */
for(let result of results) {

    /* Add a new click handler to the current node in the selected node list */
    result.addEventListner('click', function(event) {

      console.log('New event listener added');
    });
}

This method of adding an event handler does just that - it adds a new handler to an event of the specified type (ie click ), allowing you to have one or more event handlers of a particular type, on a specific element.