getElementsByClassName is not a function javascript

Question

Now I know it might seem as a duplicate, but it isn't. I read all other posts with this title, but couldn't find an answer. I have:

<ul>
  <a id="A" class="tablink">A</a>
  <a id="B" class=tablink">B</a>
...
</ul>

I want the id of above elements, to be href of another list elements from another unordered list.

<ul>
  <a id="1" class="subjects" >1</a>
  <a id="2" class="subjects">2</a>
</ul>

I already have this code

<script type="text/javascript">

$(".tablink").on("click", function(){
  var char = this.getAttribute("id");
  var link = document.getElementsByClassName("subjects").getAttribute("id");
  document.getElementsByClassName("subjects").href = char + link

  });
</script>

But it shows the error in the title. It works if I set: document.getElementById("subjects") and I also have to change subjects to id not to class. So it only works for one element, but I have more of them, so I assume that I have to do some kind of for loop? EDIT: COuld that be done with jQuery, without for loop? If yes, how?

Using `getElementsByClassName()` inside a jQuery callback. OK. — Marco Bonelli, Apr 24 '17 at 18:39
Can't speak for the error you are getting, but you should read [What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return?](http://stackoverflow.com/q/10693845/218196) — Felix Kling, Apr 24 '17 at 18:40
Your error is because `getElementsByClassName` returns a list and so when you try to access a method or attribute on that list it does not exist. — scrappedcola, Apr 24 '17 at 18:40
Adding to Marco's comment, why are you not using jQuery for that if you already use it elsewhere? — Felix Kling, Apr 24 '17 at 18:40
@scrappedcola: But wouldn't the error be "getAttribute is not a function" then? You are probably right though and the OP might be reporting the error incorrectly. — Felix Kling, Apr 24 '17 at 18:41
@FelixKling I'm making the possibly erroneous guess (hence comment without further action) that the error isn't exactly what the Op is reporting. If they would provide the exact text in console it would be great help. — scrappedcola, Apr 24 '17 at 18:43
Since you're using mostly native DOM methods anyway, you might as well drop the jQuery dependency and all its overhead. — , Apr 24 '17 at 18:43
@scrappedcola Yes, it would. @mrhovinar Can you paste this code in the dev console (F12) and tell us what it says? `document.getElementsByClassName`. When I do that on this page it says: `function getElementsByClassName() { [native code] }` — Stijn de Witt, Apr 24 '17 at 18:43
Please let us know what browser you're using. It is highly improbable that you're getting the exact error in the title if you're using a recent browser (especially since no error given in JavaScript ends with "javascript"). — Heretic Monkey, Apr 24 '17 at 18:44
Okay. @MarcoBonelli , yes I am actually pretty fresh with JavaScript, is this not okay? I am using Chrome. I have tried what mehul mohan posted. I think that he is going towards the right way. I mean. He helpd way more than MarcoBonelli. I will try to continue with mehuls suggestion, and will try jQuery. Thanks! — mrhovinar, Apr 24 '17 at 18:55
I'm not arguing about what is right or wrong, just please **[read what is on-topic here on the help center](http://stackoverflow.com/help/on-topic)** before posting questions. — Marco Bonelli, Apr 24 '17 at 18:57

mehulmpt · Answer 1 · 2017-04-24T18:40:48.490

8

document.getElementsByClassName("subjects") returns you an array of elements. You cannot set it's href property like that. Maybe you want:

var elems = document.getElementsByClassName("subjects");
for(i=0;i<elems.length;i++) {
   elems[i].href = "yourhref";
}

Update: You get error on this line: document.getElementsByClassName("subjects").getAttribute("id")

As I said above, document.getElementsByClassName("subjects") returns you an array and you're trying to call getAttribute function on it. So it probably throws document.getElementsByClassName(...).getAttribute is not a function

edited Apr 24 '17 at 18:40

answered Apr 24 '17 at 18:38

mehulmpt

15,861
12
48
88

@MarcoBonelli updated – mehulmpt Apr 24 '17 at 18:41
That's still not the error the OP put in the title though. – Marco Bonelli Apr 24 '17 at 18:42
2

I'm pretty sure the OP hasn't have a clue about what he is doing and didn't even read the error, just copied and pasted the code to get some help. – Marco Bonelli Apr 24 '17 at 18:43
1

@MarcoBonelli going with OP's code, `document.getElementsByClassName(...).getAttribute is not a function` will be thrown – mehulmpt Apr 24 '17 at 18:44
@MehulMohan I know, you are right, and your answer is right, but the OP just asked the question in the wrong way. – Marco Bonelli Apr 24 '17 at 18:45

Waqas · Answer 2 · 2017-04-24T18:53:47.780

0

The Element.getAttribute() is a function only for an Element, not an HTMLCollection which is what you have. This is what MDN says:

getAttribute() returns the value of a specified attribute on the element.

Read here.

edited Apr 24 '17 at 18:53

answered Apr 24 '17 at 18:44

Waqas

171
2
6

Nit: `getElementsByClassName` returns an *HTMLCollection*, not an array. – Felix Kling Apr 24 '17 at 18:47
@FelixKling thank you for the correction. you are right. Updated the answer. – Waqas Apr 24 '17 at 18:54

score 0 · Answer 3 · answered Apr 24 '17 at 18:52

0

When you do document.getElementsByClassName("subjects"), you get HTMLCollection.

Now, you can't get id attribute on this collection since it doesn't make sense.

He must be getting error, "getAttribute is not a function".

answered Apr 24 '17 at 18:52

Pankaj Shukla

2,657
2
11
18

getElementsByClassName is not a function javascript

3 Answers3