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를 참조했습니다. 이 모든 기능에서 사용할 수도 있습니다. 코드가 크게 정리됩니다.

지능형 함수 호출 백업 버튼 코드가 ​​있습니다.

<br>
<p id="demo"></p><h2>Intelligent Button:</h2><i>Note: Try pressing a key after clicking.</i><br>
<button id="button" shiftKey="getElementById('button').innerHTML=('You're pressing shift, aren't you?')" onscroll="getElementById('button').innerHTML=('Don't Leave me!')" onkeydown="getElementById('button').innerHTML=('Why are you pressing keys?')" onmouseout="getElementById('button').innerHTML=('Whatever, it is gone.. maybe')" onmouseover="getElementById('button').innerHTML=('Something Is Hovering Over Me.. again')" onclick="getElementById('button').innerHTML=('I was clicked, I think')">Ahhhh</button>

간단한 답변 :

   onclick="functionName(ID.value);

여기서 ID는 입력 필드의 ID입니다.

바보 같은 방법 :

onclick="javascript:CapacityChart();"

이산 자바 스크립트에 대해 읽고 콜백을 dom 이벤트에 바인딩하려면 프레임 워크 바인드 메소드를 사용해야합니다.