How to retrieve information from an element in Javascript when onclick is triggered

Question

Let's say I have a link in my DOM (but any element would be accepted), with a call to a Javascript function :

<a href="google.com" onclick="myFunction()">

, and a Jquery function to replace the click on that link and retrieve its href attribute (sorry, I'm working in Jquery, but feel free to answer in vanilla JS) :

function myFunction() {
    $(this).click(function() { return false; }); // Cancel normal behavior.
    console.log($(this).attr("href"));
}

This actually doesn't work. Usually, we need to point to an element's ID or Class to get its informations ; but if we can't set an ID or Class or anything and just process some links in a page, how to directly retrieve their informations ?

The title of this topic is intentionally general, because the method should be working for any HTML element.

It doesn't work because you're actually preventing the normal behaviour only once the element has been clicked. What is your actual question, because it's not clear? Are you asking how to override the `myFunction` function, or are you asking how to bind to a specific DOM element that doesn't have a class or ID? — BenM, Sep 24 '19 at 08:51
@BenM My question is very clear : I want to retrive informations from an element that hasn't an ID or Class. The fact that I want to prevent the link normal's behavior is just a secondary issue (wich is understandable, given that cliking on a link will reach the target, and I don't want that). — Romarain, Sep 24 '19 at 09:18
do you have to use onclick inline attributes? its bad practice. — Alex, Sep 24 '19 at 10:01
Yes I have to , due to the logic of the script I want to conceive (it's supposed to edit links in a page, in order to open a popup with the href). But anyway, someone gave me the solution. — Romarain, Sep 24 '19 at 10:13

Burak · Answer 1 · 2019-09-25T07:53:02.183

1

You can access clicked element as below

<a href="https://google.com" onclick="myFunction(this)">

function myFunction(that) {
    console.log(that.href);
}

edited Sep 25 '19 at 07:53

answered Sep 24 '19 at 08:55

Burak

186
9

1

Why use jQuery *only* to get the attribute? Just `this.href` will work fine. – Rory McCrossan Sep 24 '19 at 08:57

vipul patel · Accepted Answer · 2019-09-24T10:02:59.260

1

yes you are right that with id or css selector you could do. But there is another way.

Just pass this while calling function and then you can access all attributes of the element like below :

<a href="google.com"  style="background-color: yellow" onclick="myFunction(this, event)"> click me !!!! <a>

then you can access all info like below :

 function myFunction(element, event) {
    event.preventDefault(); // event object can be passed
    element.style.backgroundColor = "red" // attribute can be accessed
    console.log(element.attributes["data-name"])

}

edited Sep 24 '19 at 10:02

answered Sep 24 '19 at 09:15

vipul patel

668
4
7

The problem is I can't test your code given that preventDefault() doesn't work to stop the link to open a new page. – Romarain Sep 24 '19 at 09:36
you said for any element. so i did demo with DIV element. Its works fine. DO you want with link element only??? – vipul patel Sep 24 '19 at 09:51
Yeah, I'm not supposed to know that suddently, my technic for avoiding the link to redirect will fail, and that all code proposed by everybody will fail too. I was thinking that I could ask a general question, but it seems that I need to do a new topic about LINKS only, due to the amount of shit that JS is bringing me in. – Romarain Sep 24 '19 at 09:54
Okey. I have updated my answer using link tag. Please verify – vipul patel Sep 24 '19 at 09:59

score -1 · Answer 3 · answered Sep 24 '19 at 08:59

-1

HTML <a href="#" onclick="myFunction(event)">click</a>

JS

function myFunction(event) {
    event.preventDefault();
    // Do your stuff with event.target which is <a>
}

answered Sep 24 '19 at 08:59

Sonjoy Samadder

77
1
6

What doesn't work you could use `event.target.href`? – Sonjoy Samadder Sep 24 '19 at 09:15
event.prevendDefault(); doesn't work : ``` function myFunction(element) { //$(element).click(function() { return false; }); element.preventDefault(); console.log(element.attributes["href"]); } ``` – Romarain Sep 24 '19 at 09:27
It doesn't stop the link to open a page. – Romarain Sep 24 '19 at 09:28
Did you pass arg `onclick="myFunction(event)"`? – Sonjoy Samadder Sep 24 '19 at 10:05
You could try https://stackoverflow.com/questions/7056669/how-to-prevent-default-event-handling-in-an-onclick-method/7056673 – Sonjoy Samadder Sep 24 '19 at 10:14
@SonjoySamadder He wants example using link and wants to serve both purpose. prevent the click actions and accessing attributes . I have given the answer which marked. Could you please vote the answer – vipul patel Sep 24 '19 at 10:21
Erratum : I was using "myFunction(element)" and "element.preventDefault();". I didn't know that we had to use specific keywords like "event" for it to work. So, I retract my last comment. – Romarain Sep 24 '19 at 10:26
Okay then first why not `event.preventDefault()` `// Do your stuff` `window.location.href = event.target.href; // To go to the link.` – Sonjoy Samadder Sep 24 '19 at 10:29

How to retrieve information from an element in Javascript when onclick is triggered

3 Answers3