"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를 사용하는 것입니다. 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 의 ByClassName () 자체.

getElement 가 아닌 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. 그러나 대안 접근법을 사용할 수 있습니다 (각도 / 뷰 / 반응 ... 템플릿에서 사용)

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"을 작성하십시오. 요소가 아닌 요소 여야하기 때문입니다.