2015-02-24 22 views
6

Tôi có một số vấn đề với việc tính toán một số nội dung với JS và nhận các giá trị đúng trong số các trường nhập (số). Khi tôi sử dụng mã này, nó không hiển thị bất cứ điều gì. Vì vậy, những gì là sai với JS của tôi? Tôi có cần bao gồm tệp Jquery không?Nhận giá trị số đầu vào với JS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
</head> 
<body> 
     <form id="frm1" action="Calculate.html"> 
      <table width="350px" border="1px"> 
       <tr> 
        <th colspan="2">Availability</th> 
       </tr>  
       <tr> 
        <td>Total Production Time</td> 
        <td><input type="number" name="TotalProductionTime" placeholder=""> hours</td> 
       </tr> 
       <tr> 
        <td>Breaks</td> 
        <td><input type="number" name="Breaks" placeholder=""> minutes</td> 
       </tr> 
       <tr> 
        <td>Malfunctions</td> 
        <td><input type="number" name="Malfunctions" placeholder=""> minutes</td> 
       </tr> 
       <tr> 
        <td>Theoretical production time:</td> 
        <td><p id="test"></p></td> 
       </tr> 
      </table> 

<input type="button" onclick="Calculate()" name="Calculate" value="calculate"> 
<script> 
    function Calculate() 
    { 
     var TotalProductionTime = document.getElementById("TotalProductionTime").value; 
     var TotalProductionTimeInMinutes = TotalProductionTime * 60; 
     var Breaks = document.getElementById("Breaks").value; 
     var Malfunctions = document.getElementById("Malfunctions").value; 
     var TheoreticalProductionTime = TotalProductionTimeInMinutes - Breaks - Malfunctions;  

     document.getElementById("test").innerHTML = TheoreticalProductionTime; 
    } 
</script> 

</body> 
</html> 

Xin cảm ơn trước.

+1

'.value' trả về một chuỗi. Sử dụng 'parseInt (x, 10)' hoặc 'parseFloat'. –

+2

bạn đang sử dụng 'getElementById' và bạn chưa đặt ID nào. –

+0

có thể trùng lặp của [Nhận giá trị của với JS khi nó chứa các ký tự không phải là số] (http://stackoverflow.com/questions/15627341/get-value-of-input-type-number -with-js-khi-nó-chứa-phi số-characte) –

Trả lời

9

Bạn có một số sai sót trong HTML của mình, nhưng đây là một câu hỏi làm việc: Fiddle Bạn đang cố gắng lấy các phần tử theo ID của họ, nhưng bạn không cung cấp cho họ ID bạn cung cấp cho họ Tên. Cũng ngừng sử dụng các cuộc gọi javascript nội tuyến nó là thực hành xấu.

<form id="frm1" action="Calculate.html"> 
    <table width="350px" border="1px"> 
     <tr> 
      <th colspan="2">Availability</th> 
     </tr> 
     <tr> 
      <td>Total Production Time</td> 
      <td> 
       <input type="number" id="TotalProductionTime" placeholder="">hours</td> 
     </tr> 
     <tr> 
      <td>Breaks</td> 
      <td> 
       <input type="number" id="Breaks" placeholder="">minutes</td> 
     </tr> 
     <tr> 
      <td>Malfunctions</td> 
      <td> 
       <input type="number" id="Malfunctions" placeholder="">minutes</td> 
     </tr> 
     <tr> 
      <td>Theoretical production time:</td> 
      <td> 
       <p id="test"></p> 
      </td> 
     </tr> 
    </table> 
    <input type="button" onclick="Calculate()" value="calculate"> 

JS:

function Calculate() { 
     var TotalProductionTime = document.getElementById("TotalProductionTime").value; 
     var TotalProductionTimeInMinutes = TotalProductionTime * 60; 
     var Breaks = document.getElementById("Breaks").value; 
     var Malfunctions = document.getElementById("Malfunctions").value; 
     var TheoreticalProductionTime = TotalProductionTimeInMinutes - Breaks - Malfunctions; 

     document.getElementById("test").innerHTML = TheoreticalProductionTime; 
    } 
+0

Cảm ơn, bạn đã thay đổi điều gì? : x aahhwww nvm Tôi thấy nó ngay bây giờ .. Không có ID nào được đặt đúng như Yerko Palma đã đề cập. Thiên Chúa của tôi: x – Bart

+0

'Tên' của nút phải khác với hàm' onclick' hoặc trong trường hợp của bạn, tôi sẽ để nó ('name'). Ngoài ra nếu bạn muốn các phần tử theo ID, hãy cung cấp cho chúng ID và không phải là tên. – Michelangelo

2

Bạn đã có hai vấn đề ở đây. Một điều hiển nhiên là bạn cố gắng lấy tham chiếu đến các đầu vào của biểu mẫu bằng id, nhưng không cung cấp cho chúng bất kỳ thứ gì (bạn đã cung cấp cho chúng name). Để khắc phục, hoặc thay đổi các thuộc tính name một id, hoặc sử dụng các cách thức cụ thể để tham khảo họ, ví dụ:

var TotalProductionTime = document.forms.frm1.TotalProductionTime 

vấn đề thứ hai là luẩn quẩn hơn và đã làm với phạm vi thực hiện những gì bạn đặt trong các thuộc tính onclick. Bạn thấy đấy, nút của bạn được đặt tên là "Tính toán" giống như chức năng của bạn và trong ngữ cảnh của thuộc tính onclick, biểu mẫu gốc của nó được sử dụng để phân định số nhận dạng trước phạm vi toàn cục. Vì vậy, thay vì gọi hàm có tên Calculate, bạn đang cố gọi chính nút đó. Khắc phục điều đó bằng cách cho họ tên gọi khác nhau, tham khảo window.Calculate một cách rõ ràng, hoặc tốt hơn, xác định xử lý sự kiện của bạn trong JavaScript thay vì sử dụng các thuộc tính HTML:

document.forms.frm1.Calculate.onclick=Calculate 
1

Mỗi id phải được chuyển đổi sang số nguyên. Ví dụ

var Malfunctions = parseInt(document.getElementById("Malfunctions").value); 

sau đó bạn đã sẵn sàng để đi

Các vấn đề liên quan