Getting "document.getElementByClassName is not a function" error in console

Question

Any ideas how to fix this error: "document.getElementByClassName is not a function"

Code below:

HTML:

<a href="#" class="filter-btn" onclick="myFunction()" data-filter="opd-list-id-<?php echo $item->ID; ?>" style="background:<?php echo $filter_background_color ?>;color:<?php echo $filter_text_color ?> !important;">

JS

function myFunction() {
var elmnt = document.getElementByClassName("filter-btn");
elmnt.scrollIntoView(); 
}

You're looking for `getElementsByClassName`. Note the "s" on Elements — Nick, Nov 11 '19 at 19:29
If you have an error message then the first thing you should do is to search for that error, and check if there is already a question targeting that problem. And if that one does not help you to solve the problem then you should explain why. — t.niese, Nov 11 '19 at 19:54

Shankar · Accepted Answer · 2019-11-11T20:04:45.697

1

Replce getElementByClassName with getElementsByClassName

note that its plural(Elements) with "s" at end and not singular(Element)

the same class can be added to multiple objects hence, selecting by class name returns multiple items, not just one so it uses the plural form Elements instead of Element as in case of getElementById() as id must be unique and selecting by id will return only one DOM element

and, since the function getElementsByClassName returns an array of elements elmnt.scrollIntoView() won't work,
so you need to use the first element of the array as elmnt[0]

so you code will be

function myFunction() {
  var elmnt = document.getElementsByClassName("filter-btn");
  elmnt[0].scrollIntoView(); 
}

However, I would rather suggest using getElementById if you want to select only one element and use as below(first give id IdGivenToTheAnchoreTag to anchor tag)

function myFunction() {
  var elmnt = document.getElementById("IdGivenToTheAnchoreTag");
  elmnt.scrollIntoView(); 
}

edited Nov 11 '19 at 20:04

answered Nov 11 '19 at 19:32

Shankar

2,890
3
25
40

Got that and changed to Elements, thanks. But now get the following error:Uncaught TypeError: elmnt.scrollIntoView is not a function – Icon Nov 11 '19 at 19:38
1

what error? did you forgot to paste? – Shankar Nov 11 '19 at 19:38
Just added the error. – Icon Nov 11 '19 at 19:39
1

see my updated answer! – Shankar Nov 11 '19 at 19:41
1

+1; you would probably want to put the [0] before the end of elmnt's declaration; not before .scrollIntoView();. – Mikey Nov 11 '19 at 19:42
1

`will return only one DOM` DOM means _Document Object Model_ you mean a DOMElement – t.niese Nov 11 '19 at 20:03

score 0 · Answer 2 · answered Nov 11 '19 at 19:32

0

You're looking for getElementsByClassName. Note the "s" on Elements

function myFunction() {
  var elmnt = document.getElementsByClassName("filter-btn");
  test.scrollIntoView();  
}

answered Nov 11 '19 at 19:32

Nick

16,066
3
16
32

Getting "document.getElementByClassName is not a function" error in console

2 Answers2