[javascript] HTML 버튼을 사용하여 JavaScript 함수 호출

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에서 작동하면 코드를 업데이트하는 동안 다른 브라우저에서 작동하는지 쉽게 알 수 있습니다.

답변

<script>
  $(document).ready(function(){
    $('#MyButton').click(function(){
       CapacityChart();
    });
  });
</script>

<input type="button" value="Capacity Chart" id="MyButton" >

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
    }

<input type="text" id="VesDiameter" value="0" size="10" onKeyUp="CalcVolume();">

var vesdiameter = document.getElementById("VesDiameter").value;

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);