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

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

HTML 버튼을 사용하여 JavaScript 함수를 호출하려고 합니다.

코드는 다음과 같습니다.

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

그런데 제대로 작동하지 않는 것 같아요.더 좋은 방법이 있을까요?

다음 링크입니다.http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html 왼쪽 하단에 있는 capacity 탭을 클릭합니다.값이 변경되지 않으면 이 버튼에서 경보가 생성되고 값을 입력하면 차트가 생성됩니다.

HTML/DOM을 사용하여 이벤트를 처리하는 방법에는 몇 가지가 있습니다.진짜 옳고 그른 방법은 없지만 상황에 따라 다른 방법이 유용하다.

1: HTML에 정의되어 있습니다.

<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />

2: Javascript에서 이벤트의 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);

두 번째 메서드와 세 번째 메서드 모두 인라인/익명 함수를 사용할 수 있으며, 두 메서드 모두 요소가 문서에서 구문 분석된 후에 선언해야 합니다.온클릭 속성이 XHTML 사양에 없기 때문에 첫 번째 메서드는 XHTML이 아닙니다.

첫 번째 메서드와 두 번째 메서드는 서로 배타적입니다.즉, 두 번째 메서드를 사용하면 다른 메서드(첫 번째 메서드)가 덮어씁니다.세 번째 방법에서는 첫 번째 또는 두 번째 방법을 사용했더라도 동일한 이벤트 핸들러에 원하는 수의 함수를 첨부할 수 있습니다.

대부분의 경우, 문제는 고객님의 어딘가에 있습니다.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에서 동작하고 있으면 코드를 갱신하는 동안 다른 브라우저에서도 동작하고 있는지 쉽게 알 수 있습니다.

javascript를 눈에 띄지 않게 추가하는 것이 좋다고 생각합니다.

jQuery를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

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

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

HTML과 버튼에서 함수를 호출하는 방법이 정확해 보입니다.

는 '아까부터'에 것 .CapacityCount.5js의 에서 " is"라는 Firefox 3.5 "bendelcorp.js" 759 "document.all is defined" 입니다.

편집:

것 같다document.all DOM 에 입니다.「 」를 사용하고 document.getElementById()아마 효과가 있을 겁니다. " " " 입니다.document.getElementById("RUnits").valuedocument.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
    }

크롬을 하고 있기 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★navigator.appName 될 것이다Netscape. 은 크롬 ★★document.all★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★그럼 다른 브라우저는요?

「 」의 Netscape브랜치는 1996년부터 Netscape Navigator 2로 돌아가는 동안 어떤 브라우저에서도 동작할 수 있습니다....되지 않는) 것 「동작하지 않는(하지 않는)것,name의 inputelements" " " 름름는름는소 。

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

'이름을 사용하세요'를합니다.elements(better)(더 좋은) use(더 좋은)

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

최신 브라우저에서는 모두 사용할 수 있습니다.브런칭은 필요 없습니다.을 위해 4 은 "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);

나는 그것을 불벌레로 밟아보려고 했지만 그곳에서 실패했다.문제 해결에 도움이 될 것입니다.

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>

언급URL : https://stackoverflow.com/questions/1947263/using-an-html-button-to-call-a-javascript-function