Sử dụng nút HTML để gọi hàm JavaScript

Question

Tôi đang cố gắng sử dụng nút HTML để gọi hàm JavaScript.

Dưới đây là các mã:

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

Nó dường như không hoạt động chính xác mặc dù. Có cách nào tốt hơn để làm điều này?

Đây là liên kết: http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html nhấp vào tab dung lượng ở phần dưới cùng bên trái. Nút sẽ tạo ra một cảnh báo nếu các giá trị không thay đổi và sẽ tạo ra một biểu đồ nếu bạn nhập các giá trị.

Answer 1

Có một số cách để xử lý sự kiện với HTML/DOM. Không có cách nào đúng hay sai, nhưng những cách khác nhau lại hữu ích trong các tình huống khác nhau.

1: Có định nghĩa nó trong HTML:

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

2: Có thêm nó vào thuộc tính DOM cho sự kiện trong Javascript:

//- Using a function pointer: 
document.getElementById("clickMe").onclick = doFunction; 

//- Using an anonymous function: 
document.getElementById("clickMe").onclick = function() { alert('hello!'); }; 

3: Và có gắn một chức năng để trình xử lý sự kiện bằng cách sử dụng Javascript:

var el = document.getElementById("clickMe"); 
if (el.addEventListener) 
    el.addEventListener("click", doFunction, false); 
else if (el.attachEvent) 
    el.attachEvent('onclick', doFunction); 

Cả hai phương pháp thứ hai và thứ ba đều cho phép nội tuyến/anonymou Các hàm s và cả hai phải được khai báo sau khi phần tử đã được phân tích cú pháp từ tài liệu. Phương thức đầu tiên không phải là XHTML hợp lệ vì thuộc tính onclick không có trong đặc tả XHTML.

Phương thức thứ nhất và thứ hai là loại trừ lẫn nhau, có nghĩa là sử dụng một (số 2) sẽ ghi đè lên phương thức kia (số 1). Phương thức thứ 3 sẽ cho phép bạn đính kèm nhiều hàm như bạn muốn cho cùng một trình xử lý sự kiện, ngay cả khi phương thức thứ nhất hoặc thứ hai cũng đã được sử dụng.

Rất có thể, sự cố nằm ở đâu đó trong hàm CapacityChart() của bạn. Sau khi truy cập vào liên kết của bạn và chạy tập lệnh của bạn, hàm CapacityChart() chạy và hai cửa sổ bật lên được mở (một cửa sổ được đóng theo kịch bản lệnh).Nơi bạn có dòng sau:

CapacityWindow.document.write(s); 

Hãy thử như sau thay vì:

CapacityWindow.document.open("text/html"); 
CapacityWindow.document.write(s); 
CapacityWindow.document.close(); 

EDIT
Khi tôi nhìn thấy mã của bạn tôi nghĩ bạn đang viết nó đặc biệt dành cho IE. Như những người khác đã đề cập, bạn cần phải thay thế các tham chiếu đến document.all bằng document.getElementById. Tuy nhiên, bạn vẫn sẽ có nhiệm vụ sửa kịch bản sau này vì vậy tôi khuyên bạn nên làm việc trong ít nhất IE trước vì bất kỳ lỗi nào bạn thực hiện thay đổi mã để làm việc qua trình duyệt có thể gây nhầm lẫn nhiều hơn nữa. Một khi nó làm việc trong IE nó sẽ dễ dàng hơn để nói nếu nó làm việc trong các trình duyệt khác trong khi bạn đang cập nhật mã.

Answer 2

cách ngớ ngẩn:

onclick="javascript:CapacityChart();" 

Bạn nên đọc về javascript rời rạc, và sử dụng một phương pháp khuôn khổ ràng buộc để ràng buộc callbacks để Dom sự kiện.

Answer 3

tôi sẽ nói nó sẽ là tốt hơn để thêm javascript một cách un-gây khó chịu ...

nếu sử dụng jQuery bạn có thể làm một cái gì đó như:

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

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

Answer 4

này có vẻ đúng. Tôi đoán bạn đã xác định chức năng của mình bằng tên khác hoặc trong ngữ cảnh không hiển thị với nút. Vui lòng thêm một số mã

Answer 5

Một vấn đề lớn mà bạn có là bạn đang sử dụng trình duyệt sniffing không có lý do chính đáng:

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 
    } 

Tôi đang trên Chrome, vì vậy navigator.appName sẽ không Netscape. Chrome có hỗ trợ document.all không? Có lẽ, nhưng sau đó một lần nữa có thể không. Và còn các trình duyệt khác thì sao?

Phiên bản mã trên chi nhánh Netscape sẽ hoạt động trên bất kỳ trình duyệt nào trở lại Netscape Navigator 2 từ năm 1996, vì vậy bạn có thể chỉ cần gắn với ... ngoại trừ việc nó sẽ không hoạt động (hoặc isn 't được bảo đảm để làm việc) vì bạn đã không được xác định một thuộc tính name trên input yếu tố, do đó họ sẽ không được thêm vào elements mảng của hình thức như các yếu tố được đặt tên:

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

Hoặc cung cấp cho họ một tên và sử dụng mảng elements hoặc (tốt hơn) sử dụng

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

sẽ hoạt động trên tất cả các trình duyệt hiện đại - không cần phân nhánh. Chỉ cần được ở bên an toàn, thay thế mà đánh hơi cho một phiên bản trình duyệt lớn hơn hoặc bằng 4 với một tấm séc cho getElementById hỗ trợ:

if (document.getElementById) { // NB: no brackets; we're testing for existence of the method, not executing it 
    // do stuff... 
} 

Bạn có thể muốn xác nhận đầu vào của bạn cũng; một cái gì đó như

var vesdiameter = parseFloat(document.getElementById("VesDiameter").value); 
if (isNaN(vesdiameter)) { 
    alert("Diameter should be numeric"); 
    return; 
} 

sẽ giúp ích.

Answer 6

HTML của bạn và cách bạn gọi hàm từ nút trông chính xác.

Sự cố có vẻ như ở hàm CapacityCount. Tôi nhận được lỗi này trong bảng điều khiển của tôi trên Firefox 3.5: "document.all is undefined" trên dòng 759 của bendelcorp.js.

Edit:

Hình như document.all là một điều IE chỉ và là một cách chuẩn tiếp cận DOM. Nếu bạn sử dụng document.getElementById(), có lẽ nó sẽ hoạt động.Ví dụ: thay vì document.getElementById("RUnits").valuedocument.all.Capacity.RUnits.value

Answer 7

Mã của bạn là không trên dòng này:

var RUnits = Math.abs(document.all.Capacity.RUnits.value); 

tôi đã cố gắng đẩy mạnh mặc dù nó với con đom đóm và nó không có. điều đó sẽ giúp bạn tìm ra vấn đề.

bạn có tham chiếu jquery. bạn cũng có thể sử dụng nó trong tất cả các chức năng này. nó sẽ dọn sạch mã của bạn một cách đáng kể.

Answer 8

Để bạn biết, dấu chấm phẩy (;) không được phép có trong nút khi bạn gọi hàm.

Vì vậy, nó chỉ nên xem xét như thế này: onclick="CapacityChart()"

thì tất cả phải làm việc :)

Answer 9

Tôi có một mã nút chức năng-gọi-ủng hộ thông minh:

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