ใช้ปุ่ม HTML เพื่อเรียกใช้ฟังก์ชัน JavaScript

ฉันพยายามใช้ปุ่ม HTML เพื่อเรียกใช้ฟังก์ชัน JavaScript

นี่คือรหัส:

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

ดูเหมือนว่าจะทำงานไม่ถูกต้อง มีวิธีที่ดีกว่าในการทำเช่นนี้?

นี่คือลิงค์: http : //projectpath.ideape Citite.com/bendel/toolscalculators.htmlคลิกที่แท็บความจุในส่วนล่างซ้าย ปุ่มควรสร้างการแจ้งเตือนหากค่าไม่เปลี่ยนแปลงและควรสร้างแผนภูมิหากคุณป้อนค่า

มีสองสามวิธีในการจัดการเหตุการณ์ด้วย HTML / DOM ไม่มีวิธีที่ถูกหรือผิดจริง แต่วิธีต่าง ๆ มีประโยชน์ในสถานการณ์ที่แตกต่าง

1: มีการกำหนดไว้ใน HTML:

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

2: มีการเพิ่มลงในคุณสมบัติ DOM สำหรับเหตุการณ์ใน Javascript:

//- 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 เนื่องจากแอตทริบิวต์ onclick ไม่ได้อยู่ในข้อกำหนด XHTML

วิธีที่ 1 และ 2 เป็นวิธีที่ไม่เกิดร่วมกันซึ่งหมายความว่าการใช้วิธีหนึ่ง (วิธีที่สอง) จะแทนที่วิธีอื่น ๆ (วิธีที่หนึ่ง) วิธีที่ 3 จะช่วยให้คุณสามารถแนบฟังก์ชั่นได้มากเท่าที่คุณต้องการกับตัวจัดการเหตุการณ์เดียวกันแม้ว่าจะใช้วิธีที่ 1 หรือ 2 ก็ตาม

เป็นไปได้มากว่าปัญหาอยู่ที่ใดที่หนึ่งใน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: "document.all is undefined" ที่บรรทัด 759 ของ bendelcorp.js

แก้ไข:

ดูเหมือนว่าdocument.allเป็นสิ่งเดียวที่ IE และเป็นวิธีที่ไม่เป็นมาตรฐานในการเข้าถึง 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 NetscapeChrome รองรับdocument.allหรือไม่ อาจจะ แต่ แต่อาจจะไม่ได้อีกครั้ง แล้วเบราว์เซอร์อื่น ๆ ล่ะ?

รุ่นของรหัสในNetscapeสาขาควรทำงานกับเบราว์เซอร์ใด ๆ ได้ตั้งแต่ทางกลับไปที่ Netscape Navigator 2 ตั้งแต่ปี 1996 ดังนั้นคุณน่าจะติดกับที่ ... ยกเว้นว่ามันจะไม่ทำงาน (หรือไม่รับประกันว่าจะทำงาน ) เนื่องจากคุณไม่ได้ระบุ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