JS

2015-02-24 20 views
6

ile giriş numarası değeri al JS ile bazı şeyleri hesaplama ve doğru değerleri giriş alanlarından (sayı) alma ile ilgili bazı sorunlarım var. Bu kodu kullandığımda hiçbir şey göstermiyor. Peki benim JS'mde neyin var? Bir Jquery dosyası eklemem gerekir mi?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> 

Şimdiden teşekkürler.

+1

gitmeye hazır. ParseInt (x, 10) veya parseFloat işlevlerini kullanın. –

+2

, 'getElementById' kullanıyorsunuz ve herhangi bir kimlik ayarınız yok. –

+0

olası nümerik [sayısal olmayan karakterleri içerdiğinde JS ile değerini al) olasıdır. (Http://stackoverflow.com/questions/15627341/get-value-of-input-type-number -with-js-ne-içerir-olmayan-sayısal-karakter) –

cevap

9

HTML'nizde bazı hatalar vardı, ancak burada çalışan bir keman: Fiddle Öğeleri kimlikleriyle almaya çalışıyorsunuz, ancak onlara bir Ad verdiğiniz bir kimlik vermiyorsunuz. Ayrıca inline javascript çağrılarını kullanmayı bırakın, bu kötü bir uygulamadır.

<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: Burada iki sorun var

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

Teşekkürler, ne değiştin? : x aahhwww nvm şimdi görüyorum .. Yerko Palma'nın bahsettiği gibi ID yok. Tanrım: x – Bart

+0

Düğmenin 'adı '' onclick' işlevinden farklı olmalıdır veya sizin durumunuzda ('name') dışarıda bırakırım. Ayrıca, öğelerin kimliğine göre girilmesini istiyorsanız, onlara bir kimlik ve bir ad verin. – Michelangelo

2

. Açık olan bir şey, form girdilerine id tarafından bir başvuru almayı denemenizdir, ancak onlara hiçbir şey vermediniz (onlara bir name verdiniz). düzeltmek, ya bir id için name niteliğini değiştirmek veya bunlara başvuruda form özgü bir şekilde kullanmak için, örneğin:

var TotalProductionTime = document.forms.frm1.TotalProductionTime 

İkinci sorun daha kısır olduğunu ve ne koymak yürütülmesi kapsamında ilgisi var onclick öznitelikleri. Gördüğünüz gibi, düğmeniz yalnızca işleviniz gibi "Hesapla" olarak adlandırılır ve onclick özniteliği bağlamında, ana formu tanımlayıcıları genel kapsamdan önce çözmek için kullanılır. Yani Hesapla adlı işlevi çağırmak yerine, düğmenin kendisini aramaya çalışıyorsunuz. HTML niteliği window.Calculate açıkça veya çok daha iyi, JavaScript ile olay işleyicisi tanımlamak başvuran, onlara farklı isimler vermeyi yerine kullanarak o Fix:

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

Her id tamsayı dönüştürülmesi gerekir. Örnek

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

sonra senin bir dize döndürür .value` `