CODEWITHSUNDEEP
javascript
user547794
user547794

Reputation: 14511

"document.getElementByClass is not a function"

I am trying to run a function onclick of any button with class="stopMusic". I'm getting an error in Firebug

document.getElementByClass is not a function

Here is my code:

var stopMusicExt = document.getElementByClass("stopButton");
    stopButton.onclick = function() {
        var ta = document.getElementByClass("stopButton");
        document['player'].stopMusicExt(ta.value);
        ta.value = "";
    };

Upvotes: 169

Views: 788993

Answers (12)

illishh hazarika
illishh hazarika

Reputation: 11

document.getElementByClass is not a function

Yes, it is not a function nor method because it should be document.getElementsByClassName

Upvotes: 1

Gaurav Pawar
Gaurav Pawar

Reputation: 59

it should be getElementsByClassName NOT getElementByClassName ==> you missed "s" in Elements

const collectionItems = document.getElementsByClassName('.item');

Upvotes: 2

Quang Dong
Quang Dong

Reputation: 497

My solutions is:

  • Change:

    document.getElementsByClassName('.className')

  • To:

    document.querySelector('.className')

Upvotes: 12

Sanket Jagtap
Sanket Jagtap

Reputation: 9

If you wrote this "getElementByClassName" then you will encounter with this error "document.getElementByClass is not a function" so to overcome that error just write "getElementsByClassName". Because it should be Elements not Element.

Upvotes: -1

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92367

The getElementByClass does not exists, probably you want to use getElementsByClassName. However you can use alternative approach (used in angular/vue/react... templates)

function stop(ta) {
  console.log(ta.value) // document['player'].stopMusicExt(ta.value);
  ta.value='';
}
<input type="button" onclick="stop(this)" class="stopMusic" value='Stop 1'>
<input type="button" onclick="stop(this)" class="stopMusic" value='Stop 2'>

Upvotes: 0

Ande Caleb
Ande Caleb

Reputation: 1204

you spelt it wrongly, it should be " getElementsByClassName ",

var objs = document.getElementsByClassName("stopButton");
var stopMusicExt = objs[0]; //retrieve the first node in the stack

//your remaining function goes down here.. 
document['player'].stopMusicExt(ta.value);
ta.value = "";

document.getElementsByClassName - returns a stack of nodes with more than one item, since CLASS attributes are used to assign to multiple objects...

Upvotes: 2

KuN
KuN

Reputation: 1211

document.querySelectorAll works pretty well and allows you to further narrow down your selection.

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Upvotes: 0

Gajender Singh
Gajender Singh

Reputation: 1313

    enter code here
var stopMusicExt = document.getElementByClass("stopButton").value;
    stopButton.onclick = function() {
        var ta = document.getElementByClass("stopButton");
        document['player'].stopMusicExt(ta.value);
        ta.value = "";
    };


// .value will hold all data from class stopButton

Upvotes: -1

neo
neo

Reputation: 396

Before jumping into any further error checking please first check whether its

document.getElementsByClassName() itself.

double check its getElements and not getElement

Upvotes: 26

jfriend00
jfriend00

Reputation: 707228

As others have said, you're not using the right function name and it doesn't exist univerally in all browsers.

If you need to do cross-browser fetching of anything other than an element with an id with document.getElementById(), then I would strongly suggest you get a library that supports CSS3 selectors across all browsers. It will save you a massive amount of development time, testing and bug fixing. The easiest thing to do is to just use jQuery because it's so widely available, has excellent documentation, has free CDN access and has an excellent community of people behind it to answer questions. If that seems like more than you need, then you can get Sizzle which is just a selector library (it's actually the selector engine inside of jQuery and others). I've used it by itself in other projects and it's easy, productive and small.

If you want to select multiple nodes at once, you can do that many different ways. If you give them all the same class, you can do that with:

var list = document.getElementsByClassName("myButton");
for (var i = 0; i < list.length; i++) {
    // list[i] is a node with the desired class name
}

and it will return a list of nodes that have that class name.

In Sizzle, it would be this:

var list = Sizzle(".myButton");
for (var i = 0; i < list.length; i++) {
    // list[i] is a node with the desired class name
}

In jQuery, it would be this:

$(".myButton").each(function(index, element) {
    // element is a node with the desired class name
});

In both Sizzle and jQuery, you can put multiple class names into the selector like this and use much more complicated and powerful selectors:

$(".myButton, .myInput, .homepage.gallery, #submitButton").each(function(index, element) {
    // element is a node that matches the selector
});

Upvotes: 15

Saket
Saket

Reputation: 46127

It should be getElementsByClassName, and not getElementByClass. See this - https://developer.mozilla.org/en/DOM/document.getElementsByClassName.

Note that some browsers/versions may not support this.

Upvotes: 11

BoltClock
BoltClock

Reputation: 723518

You probably meant document.getElementsByClassName() (and then grabbing the first item off the resulting node list):

var stopMusicExt = document.getElementsByClassName("stopButton")[0];

stopButton.onclick = function() {
    var ta = document.getElementsByClassName("stopButton")[0];
    document['player'].stopMusicExt(ta.value);
    ta.value = "";
};

You may still get the error

document.getElementsByClassName is not a function

in older browsers, though, in which case you can provide a fallback implementation if you need to support those older browsers.

Upvotes: 293

Related Questions