Discovering the element's ID upon clicking a button using Mootools (version 1.1)

Question

Discovering the element's ID upon clicking a button using Mootools (version 1.1)

There are multiple links with random ids as shown below:

<a href="#" class="remove_pid" id="pid_123">Remove 123</a>
<a href="#" class="remove_pid" id="pid_234">Remove 234</a>
<a href="#" class="remove_pid" id="pid_567">Remove 567</a>
<a href="#" class="remove_pid" id="pid_890">Remove 890</a>

An event handler has been set up like this:

$$('.remove_pid').addEvents({
   'click': removePid
});

which triggers the following function:

function removePid(event)
{
    alert('How can I retrieve the element id???');
}

The main query is how to retrieve the element id within the removePid() function.

UPDATE:

@Aishwar, event.target.id appears to work in a specific scenario, but not in my case

<a href="#" class="remove_pid"><img src="/123.jpg" id="pid_123"></a>

UPDATE 2:

Initially overlooked, the content is an image instead of the text "Remove 123" as illustrated below:

<a href="#" class="remove_pid" id="pid_123"><img src="/123.jpg"></a>

Therefore, appreciation to @Dimitra for bringing it to attention. The downvote was unexpected, but I acknowledge its legitimacy.

javascript mootools click element

Answer 1

Answer №1

My knowledge with mootools is limited, however I believe the following code snippet in the removePid function may work:

var obj = event.srcElement || event.target;
obj.id // represents the id of the element, where obj is the actual DOM element

Answer 2

My knowledge with mootools is limited, however I believe the following code snippet in the removePid function may work:

var obj = event.srcElement || event.target;
obj.id // represents the id of the element, where obj is the actual DOM element

Answer 3

Answer №2

After reviewing the changes made in the latest update:

http://www.jsfiddle.net/dimitar/Sr8LC/

$$('.remove_pid').addEvents({
    'click': function(e) {
        new Event(e).stop();
        var id = this.getProperty("id");
        alert(id);
        alert(id.replace("pid_", ""));
    }
});

In order to implement a named function and maintain the event:

var removeProduct = function(e) {
    new Event(e).stop();
    var id = this.getProperty("id");
    alert(id);
    alert(id.replace("pid_", ""));
};

$$('a.remove_pid').each(function(el) {
    el.addEvents({
        'click': removeProduct.bind(el)
    });
});

Both functions will have this referring to the triggering element (the anchor), allowing you to access its properties. Additionally, this.getFirst() can be used to reference the image (if needed).

Answer 4

After reviewing the changes made in the latest update:

http://www.jsfiddle.net/dimitar/Sr8LC/

$$('.remove_pid').addEvents({
    'click': function(e) {
        new Event(e).stop();
        var id = this.getProperty("id");
        alert(id);
        alert(id.replace("pid_", ""));
    }
});

In order to implement a named function and maintain the event:

var removeProduct = function(e) {
    new Event(e).stop();
    var id = this.getProperty("id");
    alert(id);
    alert(id.replace("pid_", ""));
};

$$('a.remove_pid').each(function(el) {
    el.addEvents({
        'click': removeProduct.bind(el)
    });
});

Both functions will have this referring to the triggering element (the anchor), allowing you to access its properties. Additionally, this.getFirst() can be used to reference the image (if needed).

Answer 5

Answer №3

Here's the solution I came up with:

const findElementById = (event) => {
    //alert('yo what is my element id???');
    $(event.target).closest('a').attr('id');
}

Tested and verified on Firefox 3.6

Answer 6

Here's the solution I came up with:

const findElementById = (event) => {
    //alert('yo what is my element id???');
    $(event.target).closest('a').attr('id');
}

Tested and verified on Firefox 3.6

Discovering the element's ID upon clicking a button using Mootools (version 1.1)

Answer №1

Answer №2

Answer №3

Similar questions

Is there an efficient method for matching "data-" attributes with property names in mixed case?

Issue encountered while attempting to attach an event listener to an element within a class

The node server is experiencing difficulties connecting to the mysql database, resulting in a timed out connection error at Connection._handleConnectTimeout

I am attempting to push notifications to a particular device using Firebase cloud functions

React encountered an expression when it was looking for either an assignment or function call

I am unable to update an array within my component using useEffect

Tips for importing a PDF file and storing it in your database

methods for transferring JSON data from JavaScript to PHP

What are the benefits of adding member functions to the data structures of React.js store?

What could be causing the Universal Code for Disqus to not function properly?

The map function is malfunctioning when trying to query data from MongoDB

Creating a div resizing function using only JavaScript is a fun and useful project to tackle

Adjust variable values when the window is resized

How can I create 3 conditions in an AJAX request to verify a user's ID?

It appears that the pixel sizes are different than what was originally designed

JavaScript closures and the misinterpretation of returning values

Utilizing ReactJS useState to eliminate a className

What could be causing the block to fail in the event of an AJAX request?

Object Literal vs Object-Oriented Javascript: Comparing the Two

How can the total price for a shopping cart be computed in React/Redux?