“Document.getElementByClass bukan fungsi”

Saya mencoba menjalankan fungsi onclicktombol apa saja dengan class="stopMusic". Saya mendapatkan kesalahan di Firebug

document.getElementByClass bukan fungsi

Ini kode saya:

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

Anda mungkin bermaksud document.getElementsByClassName()(dan kemudian mengambil item pertama dari daftar simpul yang dihasilkan):

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

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

Anda mungkin masih mendapatkan kesalahan

document.getElementsByClassName bukan fungsi

di browser yang lebih lama, namun, dalam hal ini Anda dapat memberikan implementasi mundur jika Anda perlu mendukung browser yang lebih lama.

Seperti yang orang lain katakan, Anda tidak menggunakan nama fungsi yang tepat dan itu tidak ada secara universal di semua browser.

Jika Anda perlu melakukan cross-browser mengambil apa pun selain elemen dengan id document.getElementById(), maka saya sangat menyarankan Anda mendapatkan perpustakaan yang mendukung pemilih CSS3 di semua browser. Ini akan menghemat banyak waktu pengembangan, pengujian dan perbaikan bug. Hal termudah untuk dilakukan adalah menggunakan jQuery karena tersedia secara luas, memiliki dokumentasi yang sangat baik, memiliki akses CDN gratis dan memiliki komunitas yang sangat baik di belakangnya untuk menjawab pertanyaan. Jika itu sepertinya lebih dari yang Anda butuhkan, maka Anda bisa mendapatkan Sizzle yang hanya perpustakaan pemilih (itu sebenarnya mesin pemilih di dalam jQuery dan lain-lain). Saya sudah menggunakannya sendiri di proyek lain dan mudah, produktif, dan kecil.

Jika Anda ingin memilih beberapa node sekaligus, Anda dapat melakukannya dengan berbagai cara. Jika Anda memberi mereka semua kelas yang sama, Anda dapat melakukannya dengan:

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

dan itu akan mengembalikan daftar node yang memiliki nama kelas itu.

Dalam Sizzle, ini akan menjadi ini:

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

Di jQuery, ini akan menjadi ini:

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

Di Sizzle dan jQuery, Anda dapat memasukkan beberapa nama kelas ke dalam pemilih seperti ini dan menggunakan penyeleksi yang jauh lebih rumit dan kuat:

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

Sebelum beralih ke pemeriksaan kesalahan lebih lanjut, harap periksa dulu apakah ada

document.getElement s ByClassName () itu sendiri.

periksa nya getElement s dan tidak getElement

Seharusnya getElementsByClassName, dan tidak getElementByClass. Lihat ini - https://developer.mozilla.org/en/DOM/document.getElementsByClassName .

Perhatikan bahwa beberapa browser / versi mungkin tidak mendukung ini.

document.querySelectorAll bekerja cukup baik dan memungkinkan Anda untuk mempersempit pilihan Anda.

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

Anda salah mengeja, seharusnya "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 - mengembalikan setumpuk node dengan lebih dari satu item, karena atribut CLASS digunakan untuk menetapkan ke beberapa objek ...

    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

Tidak getElementByClassada, mungkin Anda ingin menggunakan getElementsByClassName. Namun Anda dapat menggunakan pendekatan alternatif (digunakan dalam template 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'>

Jika Anda menulis "getElementByClassName" ini, maka Anda akan menjumpai kesalahan ini "document.getElementByClass bukan fungsi" jadi untuk mengatasi kesalahan itu cukup tulis "getElementsByClassName". Karena itu harus Elemen bukan Elemen.