«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 используются для присвоения нескольким объектам ...

Если вы написали это «getElementByClassName», то вы столкнетесь с этой ошибкой «document.getElementByClass не является функцией», поэтому, чтобы преодолеть эту ошибку, просто напишите «getElementsByClassName». Потому что это должны быть элементы, а не элемент.

    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. Однако вы можете использовать альтернативный подход (используется в шаблонах angular / vue / react ...)

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