Use hasAttribute() get TypeError: hasAttribute is not a function

Question

I try to find out the number of <img> elements that do not have "style" attribute in a HTML file by using JavaScript.

My solution: find out numbers of <img> tags as "imgCount", then get number of <img> tags with "style" attribute as "imgStyCount". After that, use "imgCount" minus "imgStyCount" to get the final result that I wish to know.

However, something goes wrong. My browser keep told me

TypeError: document.getElementsByTagName(...)[K].hasAttribute is not a function

At the if statement. And the weird thing is, the alert(document.getElementsByTagName("img")[k].hasAttribute("style") show the if statement result is TRUE. How it can be like not a function and give the true value?

var imgCount = 0;

var imgStyCount = 0;

var result;

for (k in document.getElementsByTagName("img")) {

  if (document.getElementsByTagName("img")[k].hasAttribute("style") == true) {

    alert(document.getElementsByTagName("img")[k].hasAttribute("style"));

    console.log("    <img> =: ", document.getElementsByTagName("img")[k].style);

    imgStyCount++;

  }

  imgCount++;

}
result = imgCount - imgStyCount;

<img height="150px" src="Http://flax.nzdl.org/images/ngf.jpeg" style="vertical-align:middle;margin-right:20px;" />
<img src="Http://flax.nzdl.org/images/abc.jpg" />
<img src="Http://flax.nzdl.org/images/fbc.jpg" />
<img src="Http://flax.nzdl.org/images/agc.jpg" />
<img src="Http://flax.nzdl.org/images/abt.jpg" />

[Never use `for...in` loops to iterate array-like objects!!!!!](http://stackoverflow.com/a/36296155/1529630) — Oriol, Apr 01 '16 at 05:01
Check what value k has when you get that error. You might be surprised. — nnnnnn, Apr 01 '16 at 05:03
Thanks all of you. I finally realise what's wrong with my crap code. — H. Zhao, Apr 01 '16 at 06:29
Yet another misleading error message. It's like saying Budweiser is not a beer just because you are drinking a can of Coke. — Paul McCarthy, Mar 24 '21 at 17:50

score 6 · Answer 1 · answered Apr 01 '16 at 05:04

Here's a simple way without using loop.

You can use querySelectorAll with attribute selector

document.querySelectorAll('img[style]') will select all the <img> elements on the page having style attribute.

var result = document.querySelectorAll('img').length - document.querySelectorAll('img[style]').length;

alert(result);

<img height="150px" src="Http://flax.nzdl.org/images/ngf.jpeg" style="vertical-align:middle;margin-right:20px;" />
<img src="Http://flax.nzdl.org/images/abc.jpg" />
<img src="Http://flax.nzdl.org/images/fbc.jpg" />
<img src="Http://flax.nzdl.org/images/agc.jpg" />
<img src="Http://flax.nzdl.org/images/abt.jpg" />

that's fantastic, I wish I could come with same idea. Thank you so much! — H. Zhao, Apr 01 '16 at 06:31

score 3 · Accepted Answer · answered Apr 01 '16 at 05:00

Use for-loop to iterate image elements than for-in

var imgStyCount = 0;
var elems = document.getElementsByTagName("img");
for (var k = 0; k < elems.length; k++) {
  if (elems[k].hasAttribute("style")) {
    imgStyCount++;
  }
}
var result = elems.length - imgStyCount;
alert(result);

<img height="150px" src="Http://flax.nzdl.org/images/ngf.jpeg" style="vertical-align:middle;margin-right:20px;" />
<img src="Http://flax.nzdl.org/images/abc.jpg" />
<img src="Http://flax.nzdl.org/images/fbc.jpg" />
<img src="Http://flax.nzdl.org/images/agc.jpg" />
<img src="Http://flax.nzdl.org/images/abt.jpg" />

Fiddle demo

score -1 · Answer 3 · answered Sep 07 '22 at 14:16

-1

You're welcome.

function hasAttr(el, attr) {
      if(typeof el === 'object' && el !== null && 'getAttribute' in el  && el.hasAttribute(attr)) return true
      else return false
    }

answered Sep 07 '22 at 14:16

edo9731

1

2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 12 '22 at 21:24

score -2 · Answer 4 · answered Apr 19 '16 at 08:03

-2

<span medium-img>Whatever</span>

alert($('span').is('[medium-img]')); // Returns true

answered Apr 19 '16 at 08:03

Paulo M

1
1

3

Please explain how your answer solves the problem, it will help everyone understand your solution with more clarity and for future reference. – Aziz Apr 20 '16 at 06:04

Use hasAttribute() get TypeError: hasAttribute is not a function

4 Answers4