“Document.getElementByClass bir işlev değil”

onclickHerhangi bir düğmenin işlevini çalıştırmaya çalışıyorum class="stopMusic". Firebug'da bir hata alıyorum

document.getElementByClass bir işlev değildir

İşte benim kod:

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

Muhtemelen document.getElementsByClassName()(ve ardından sonuçta ortaya çıkan düğüm listesindeki ilk öğeyi yakaladınız):

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

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

Yine de hatayı alabilirsiniz

document.getElementsByClassName bir işlev değil

Ancak eski tarayıcılarda bu eski tarayıcıları desteklemeniz gerekiyorsa bir geri dönüş uygulaması sağlayabilirsiniz.

Diğerlerinin söylediği gibi, doğru işlev adını kullanmıyorsunuz ve tüm tarayıcılarda univeral olarak mevcut değil.

Kimliğine sahip bir öğeden başka bir şey çapraz tarayıcı getirmeniz gerekiyorsa, document.getElementById()tüm tarayıcılarda CSS3 seçicilerini destekleyen bir kitaplık almanızı şiddetle öneririm. Size büyük miktarda geliştirme süresi, test ve hata düzeltme kazandıracak. Yapılması en kolay şey sadece jQuery kullanmaktır, çünkü çok yaygın olarak mevcuttur, mükemmel belgelere sahiptir, ücretsiz CDN erişimine sahiptir ve soruları cevaplamak için arkasında mükemmel bir insan topluluğuna sahiptir. İhtiyacınız olandan daha fazla gibi görünüyorsa , sadece bir seçici kütüphane olan Sizzle'yi alabilirsiniz (aslında jQuery ve diğerlerinin içindeki seçici motor). Diğer projelerde tek başına kullandım ve kolay, üretken ve küçük.

Aynı anda birden fazla düğüm seçmek istiyorsanız, bunu birçok farklı yolla yapabilirsiniz. Onlara aynı sınıfı verirseniz, bunu aşağıdakilerle yapabilirsiniz:

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

ve bu sınıf adına sahip düğümlerin bir listesini döndürür.

Sizzle'de şu olurdu:

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

JQuery'de şu olurdu:

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

Hem Sizzle hem de jQuery'de, seçiciye böyle birden çok sınıf adı koyabilir ve çok daha karmaşık ve güçlü seçiciler kullanabilirsiniz:

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

Daha fazla hata kontrolüne geçmeden önce lütfen

document.getElement s ByClassName () öğesinin kendisi.

onun getElement iki kez kontrol lar getElement değil

O olmalı getElementsByClassNamedeğil getElementByClass. Şuna bakın - https://developer.mozilla.org/en/DOM/document.getElementsByClassName . .

Bazı tarayıcıların / sürümlerin bunu desteklemeyebileceğini unutmayın.

document.querySelectorAll oldukça iyi çalışır ve seçiminizi daha da daraltmanızı sağlar.

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

yanlış hecelediğinizde "getElementsByClassName" olmalıdır,

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 öznitelikleri birden çok nesneye atamak için kullanıldığından, birden fazla öğeye sahip bir düğüm yığını döndürür ...

    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

Mevcut getElementByClassdeğil, muhtemelen kullanmak istiyorsunuz getElementsByClassName. Ancak alternatif yaklaşımı kullanabilirsiniz (açısal / vue / tepki ... şablonlarında kullanılır)

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

Bu "getElementByClassName" yazdıysanız, bu hatayla karşılaşacaksınız "document.getElementByClass bir işlev değil", bu hatayı aşmak için sadece "getElementsByClassName" yazın. Çünkü Element değil Element olmalı.