"Document.getElementByClass не є функцією"

Я намагаюся запустити функцію onclickбудь-якої кнопки за допомогою class="stopMusic". Я отримую помилку в Firebug

document.getElementByClass не є функцією

Ось мій код:

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

Ви, мабуть, мали на увазі document.getElementsByClassName()(а потім схопили перший елемент із результуючого списку вузлів):

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

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

Ви все одно можете отримати помилку

document.getElementsByClassName не є функцією

у старих браузерах, проте в цьому випадку ви можете надати резервну реалізацію, якщо вам потрібно підтримати ці старі браузери.

Як вже говорили інші, ви не використовуєте правильну назву функції, і вона не існує однобічно у всіх браузерах.

Якщо вам потрібно зробити перехресне завантаження браузера будь-якого іншого, крім елемента з ідентифікатором document.getElementById(), я настійно рекомендую вам придбати бібліотеку, яка підтримує CSS3-селектори в усіх браузерах. Це заощадить вам величезну кількість часу на розробку, тестування та виправлення помилок. Найпростіше це просто скористатися jQuery, оскільки він настільки широко доступний, має чудову документацію, має безкоштовний доступ до CDN та має чудову спільноту людей, які відповідають за це, щоб відповідати на запитання. Якщо це здається більше, ніж потрібно, ви можете отримати Sizzle, який є лише бібліотекою селекторів (це насправді движок селектора всередині jQuery та інших). Я використовував його сам в інших проектах, і це легко, продуктивно і мало.

Якщо ви хочете вибрати кілька вузлів одночасно, ви можете зробити це різними способами. Якщо ви даєте їм все той же клас, ви можете зробити це за допомогою:

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

і він поверне список вузлів, що мають таку назву класу.

У Sizzle це було б так:

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

У jQuery це було б так:

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

І в Sizzle, і в jQuery ви можете помістити кілька імен класів у такий селектор і використовувати набагато складніші та потужніші селектори:

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

Перш ніж переходити до будь-якої подальшої перевірки помилок, спочатку перевірте, чи є її

document.getElement s ByClassName () себе.

двічі перевірити його getElement s, а не getElement

Це має бути getElementsByClassName, а ні getElementByClass. Дивіться це - https://developer.mozilla.org/en/DOM/document.getElementsByClassName .

Зауважте, що деякі браузери / версії можуть не підтримувати це.

document.querySelectorAll працює досить добре і дозволяє ще більше звузити вибір.

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

ви написали це неправильно, це повинно бути "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 - повертає стек вузлів з більш ніж одним елементом, оскільки атрибути CLASS використовуються для призначення декількох об'єктів ...

    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

getElementByClassНе існує, ймовірно , ви хочете використовувати getElementsByClassName. Однак ви можете скористатися альтернативним підходом (використовується в шаблонах кутових / відтінків / реакцій ...)

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'>

Якщо ви написали це "getElementByClassName", ви зіткнетеся з цією помилкою "document.getElementByClass не є функцією", тому для подолання цієї помилки просто напишіть "getElementsByClassName". Тому що це повинні бути Елементи, а не Елементи.