"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 = "";
    };

Ответы

Ответ 1

Вероятно, вы имели в виду document.getElementsByClassName() (а затем захватили первый элемент из результирующего списка node):

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

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

Вы все еще можете получить ошибку

document.getElementsByClassName не является функцией

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

Ответ 2

Как говорили другие, вы не используете правильное имя функции, и оно не существует универсально во всех браузерах.

Если вам нужно сделать кросс-браузерную выборку чего-либо, кроме элемента с идентификатором с 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
});

Ответ 3

Прежде чем переходить на дальнейшую проверку ошибок, пожалуйста, сначала проверьте, есть ли

document.getElement s ByClassName().

дважды проверьте его getElement s, а не getElement

Ответ 5

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

Ответ 6

getElementByClass не существует, возможно, вы хотите использовать getElementsByClassName. Однако вы можете использовать альтернативный подход (используется в шаблонах angular/vue/реагировать...)

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

Ответ 7

    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