HTML 버튼에서 JavaScript 함수를 올바르게 호출하는 방법은 무엇입니까?

HTML 버튼으로 JavaScript 함수 호출

HTML 버튼을 사용하여 JavaScript 함수인 CapacityChart()를 호출하려고 합니다. 하지만 함수가 제대로 실행되지 않습니다.

첫 번째 접근 방식은 HTML 내에서 직접 onclick 이벤트 핸들러를 정의하는 것입니다. element:

<input type="button" value="Capacity Chart" onclick="CapacityChart();">

그러나 HTML에서 이벤트 핸들러를 정의하는 데는 제한이 있습니다. 최신 브라우저는 더 나은 코드 구성 및 유지 관리를 위해 JavaScript 이벤트 리스너 사용을 선호합니다.

JavaScript를 사용하면 addEventListener() 메서드를 사용하여 버튼의 onclick 이벤트에 이벤트 리스너를 할당할 수 있습니다.

document.getElementById("buttonId").addEventListener("click", CapacityChart);

또 다른 옵션은 onclick 속성에 직접 익명 함수를 첨부하는 것입니다.

document.getElementById("buttonId").onclick = function() { CapacityChart(); };

CapacityChart() 함수는 다른 곳에 있을 가능성이 높습니다. 다음 코드를 사용하여 문제를 해결해 보세요.

CapacityWindow.document.open("text/html");
CapacityWindow.document.write(s);
CapacityWindow.document.close();

또한 브라우저 간 호환성을 보장하려면 코드에서 document.all의 모든 인스턴스를 document.getElementById로 바꾸세요.

위 내용은 HTML 버튼에서 JavaScript 함수를 올바르게 호출하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!