“ 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 ไม่ใช่ฟังก์ชั่น

ในเบราว์เซอร์ที่เก่ากว่าซึ่งในกรณีนี้คุณสามารถใช้การเลือกสำรองหากคุณต้องการสนับสนุนเบราว์เซอร์รุ่นเก่าเหล่านั้น

อย่างที่คนอื่นพูดคุณไม่ได้ใช้ชื่อฟังก์ชั่นที่ถูกต้องและไม่มีอยู่จริงในเบราว์เซอร์ทั้งหมด

หากคุณจำเป็นต้องทำการดึงข้อมูลข้ามเบราว์เซอร์ของสิ่งอื่นนอกเหนือจากองค์ประกอบที่มี id ด้วย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อย่างไรก็ตามคุณสามารถใช้วิธีอื่น (ใช้ในเทมเพลตเชิงมุม / 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'>

หากคุณเขียน "getElementByClassName" นี้คุณจะพบกับข้อผิดพลาดนี้ "document.getElementByClass ไม่ใช่ฟังก์ชัน" ดังนั้นเพื่อเอาชนะข้อผิดพลาดนั้นเพียงแค่เขียน "getElementsByClassName" เพราะมันควรเป็นองค์ประกอบไม่ใช่องค์ประกอบ