I'm examining a DOM element using console.log. The DOM element is an anchor:
<a href="#" class="videoimage" data-id="ks3H_s3e-Wc"></a>
When I try to access its id and output it using either of the following lines:
console.log($this.attr(data-id));
or
console.log($this.data('id'));
I get an error:
Object [object HTMLAnchorElement] has no method 'attr'
('data' in the second case)
Does an anchor element not have the attr or data methods, or is my mistake something else?
I'm examining a DOM element using console.log. The DOM element is an anchor:
<a href="#" class="videoimage" data-id="ks3H_s3e-Wc"></a>
When I try to access its id and output it using either of the following lines:
console.log($this.attr(data-id));
or
console.log($this.data('id'));
I get an error:
Object [object HTMLAnchorElement] has no method 'attr'
('data' in the second case)
Does an anchor element not have the attr or data methods, or is my mistake something else?
Share Improve this question edited Jan 20, 2014 at 9:37 Irvin Dominin 31k9 gold badges80 silver badges113 bronze badges asked Apr 18, 2013 at 2:48 Solorzano JoseSolorzano Jose 6322 gold badges8 silver badges17 bronze badges 2- Thanks but that's what i meant, it was a typo, that wasnt it – Solorzano Jose Commented Apr 18, 2013 at 2:53
- 2 That error message happens because you are trying to use a jquery method 'attr' on an html object. So the answer to why you get the message is that 'this' is not a jquery object. – Coin_op Commented Apr 18, 2013 at 3:04
4 Answers
Reset to default 12That looks like its because your this reference is not a jquery object.
Try these instead:
$(this).data('id')
$(this).attr('data-id')
It is telling you exactly what the problem is. .data and .attr are jQuery functions. If your want to get an attribute value using a javascript object do the following, after giving an id to your element:
console.log(document.getElementById("a").getAttribute("data-id"));
jsFiddle: http://jsfiddle/hescano/pFdEj/
Something else is wrong in your page, then. The following does work:
$(this).data("id")
http://jsfiddle/RQw8E/
How are you using $(this)?
Works for me:
HTML
<a href="#" class="videoimage" data-id="ks3H_s3e-Wc">Click</a>
JavaScript
$(".videoimage").click(function() {
var dataID = $(this).data("id");
var dataIDAttr = $(this).attr("data-id");
console.log(dataID);
console.log(dataIDAttr);
});
JSFiddle
Are you sure you attached some sort of event to the function that calls these statements?
You could also use vanilla JS
var anchorArr = document.getElementsByTagName("a");
for (var i = 0; i < anchorArr.length; i++) {
if(anchorArr[i].getAttribute("class")==="videoimage") {
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//quick and dirty, there are better ways to do this
console.log(anchorArr[i].getAttribute("data-id"));
}
}
jsFiddle