[javascript] HTML 버튼을 사용하여 JavaScript 함수 호출
JavaScript 버튼을 사용하여 JavaScript 함수를 호출하려고합니다.
코드는 다음과 같습니다.
<input type="button" value="Capacity Chart" onclick="CapacityChart();">
그래도 제대로 작동하지 않는 것 같습니다. 더 좋은 방법이 있습니까?
링크는 다음과 같습니다. http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html 왼쪽 하단 섹션에서 용량 탭을 클릭하십시오. 값이 변경되지 않으면 버튼이 경고를 생성하고 값을 입력하면 차트를 생성해야합니다.
답변
HTML / DOM으로 이벤트를 처리하는 몇 가지 방법이 있습니다. 옳고 그른 방법은 없지만 상황에 따라 다른 방법이 유용합니다.
1 : HTML에 정의되어 있습니다.
<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />
2 : 자바 스크립트로 이벤트의 DOM 속성에 추가했습니다.
//- Using a function pointer:
document.getElementById("clickMe").onclick = doFunction;
//- Using an anonymous function:
document.getElementById("clickMe").onclick = function () { alert('hello!'); };
3 : Javascript를 사용하여 이벤트 핸들러에 함수를 첨부합니다.
var el = document.getElementById("clickMe");
if (el.addEventListener)
el.addEventListener("click", doFunction, false);
else if (el.attachEvent)
el.attachEvent('onclick', doFunction);
두 번째 및 세 번째 메소드는 모두 인라인 / 익명 함수를 허용하며 요소가 문서에서 구문 분석 된 후에 선언되어야합니다. onclick 속성이 XHTML 사양에 없기 때문에 첫 번째 방법은 유효한 XHTML이 아닙니다.
첫 번째와 두 번째 방법은 상호 배타적이므로 하나 (두 번째)를 사용하면 다른 하나 (1)를 무시합니다. 세 번째 메소드를 사용하면 첫 번째 또는 두 번째 메소드도 사용 된 경우에도 동일한 이벤트 핸들러에 원하는만큼 많은 함수를 첨부 할 수 있습니다.
대부분의 경우 문제는 CapacityChart()
함수의 어딘가에 있습니다. 링크를 방문하여 스크립트를 실행하면 CapacityChart () 함수가 실행되고 두 개의 팝업이 열립니다 (하나는 스크립트에 따라 닫힙니다). 다음 줄이있는 경우 :
CapacityWindow.document.write(s);
대신 다음을 시도하십시오.
CapacityWindow.document.open("text/html");
CapacityWindow.document.write(s);
CapacityWindow.document.close();
편집
코드를 보았을 때 IE 용으로 특별히 작성했다고 생각했습니다. 다른 언급로서 당신은 참조를 교체해야합니다 document.all
으로 document.getElementById
. 그러나이 후에도 스크립트를 수정하는 작업을 계속해야하므로 크로스 브라우저에서 작동하도록 코드를 변경하는 실수가 더 혼란을 줄 수 있으므로 적어도 IE에서 먼저 작동시키는 것이 좋습니다. 일단 IE에서 작동하면 코드를 업데이트하는 동안 다른 브라우저에서 작동하는지 쉽게 알 수 있습니다.
답변
나는 눈에 거슬리지 않게 자바 스크립트를 추가하는 것이 더 좋을 것이라고 말하고 싶습니다 …
jQuery를 사용하면 다음과 같은 작업을 수행 할 수 있습니다.
<script>
$(document).ready(function(){
$('#MyButton').click(function(){
CapacityChart();
});
});
</script>
<input type="button" value="Capacity Chart" id="MyButton" >
답변
HTML과 버튼에서 함수를 호출하는 방식이 올바르게 보입니다.
문제가 CapacityCount
기능 에있는 것 같습니다. Firefox 3.5의 콘솔에서이 오류가 발생합니다. bendelcorp.js의 759 행에서 “document.all is undefined”입니다.
편집하다:
같은 외모는 document.all
인터넷 익스플로러 전용 일이며, DOM 액세스하는 비표준 방법입니다. 을 사용 document.getElementById()
하면 아마 작동합니다. 예 : document.getElementById("RUnits").value
대신document.all.Capacity.RUnits.value
답변
이것은 정확 해 보인다. 다른 이름으로 또는 버튼에 보이지 않는 컨텍스트에서 함수를 정의했다고 생각합니다. 코드를 추가하십시오
답변
함수를 호출 할 때 세미콜론 ( ; )은 버튼에 없어야합니다.
따라서 다음과 같이 표시되어야합니다. onclick="CapacityChart()"
그런 다음 모두 작동해야합니다. 🙂
답변
당신이 가지고있는 한 가지 큰 문제는 아무런 이유없이 브라우저 스니핑을 사용한다는 것입니다.
if(navigator.appName == 'Netscape')
{
vesdiameter = document.forms['Volume'].elements['VesDiameter'].value;
// more stuff snipped
}
else
{
vesdiameter = eval(document.all.Volume.VesDiameter.value);
// more stuff snipped
}
Chrome을 사용하고 navigator.appName
있습니다 Netscape
. 크롬은 지원 document.all
합니까? 어쩌면 다시는 아닐 수도 있습니다. 그리고 다른 브라우저는 어떻습니까?
Netscape
지점 의 코드 버전은 1996 년부터 Netscape Navigator 2로 돌아가는 모든 브라우저에서 작동해야하므로 작동하지 않을 것입니다 (또는 작동하지 않을 수도 있음을 제외하고). ) name
는 input
요소에 속성을 지정하지 않았 으므로 elements
이름 지정된 요소로 양식의 배열에 추가되지 않습니다 .
<input type="text" id="VesDiameter" value="0" size="10" onKeyUp="CalcVolume();">
그들에게 이름을 지정하고 elements
배열을 사용 하거나 (더 나은) 사용
var vesdiameter = document.getElementById("VesDiameter").value;
모든 최신 브라우저에서 작동하며 분기가 필요하지 않습니다. 안전을 위해 브라우저 버전의 스니핑을 4 이상으로 바꾸면 getElementById
지원 확인으로 대체됩니다 .
if (document.getElementById) { // NB: no brackets; we're testing for existence of the method, not executing it
// do stuff...
}
입력 내용도 확인하고 싶을 것입니다. 같은
var vesdiameter = parseFloat(document.getElementById("VesDiameter").value);
if (isNaN(vesdiameter)) {
alert("Diameter should be numeric");
return;
}
도움이 될 것이다.
답변
이 줄에서 코드가 실패했습니다.
var RUnits = Math.abs(document.all.Capacity.RUnits.value);
나는 firebug로 스테핑을 시도했지만 거기에서 실패합니다. 문제를 파악하는 데 도움이됩니다.
jquery를 참조했습니다. 이 모든 기능에서 사용할 수도 있습니다. 코드가 크게 정리됩니다.