2015-02-24 14 views
6

के साथ इनपुट नंबर मान प्राप्त करें मुझे जेएस के साथ कुछ सामानों की गणना करने और इनपुट फ़ील्ड (संख्या) से सही मान प्राप्त करने के साथ कुछ समस्याएं हैं। जब मैं इस कोड का उपयोग करता हूं तो यह कुछ भी नहीं दिखाता है। तो मेरे जेएस के साथ क्या गलत है? क्या मुझे एक jquery फ़ाइल शामिल करने की आवश्यकता है?जेएस

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

अग्रिम धन्यवाद।

+1

जाना 'तैयार है। 'ParseInt (x, 10)' या 'parseFloat' का प्रयोग करें। –

+2

आप 'getElementById' का उपयोग कर रहे हैं और आपके पास कोई आईडी सेट नहीं है। –

+0

संभावित डुप्लिकेट [<इनपुट प्रकार = "संख्या" का मूल्य प्राप्त करें> जेएस के साथ जब इसमें गैर-संख्यात्मक वर्ण होते हैं] (http://stackoverflow.com/questions/15627341/get-value-of-input-type-number -with-js-when-it-include-non-numeric-charactere) –

उत्तर

9

आपको अपने एचटीएमएल में कुछ गलतियां थीं, लेकिन यहां एक कामकाजी पहेली: Fiddle आप अपने आईडी द्वारा तत्व प्राप्त करने की कोशिश कर रहे हैं, लेकिन आप उन्हें एक आईडी नहीं देते हैं जिसे आप उन्हें नाम देते हैं। इनलाइन जावास्क्रिप्ट कॉल का उपयोग करना बंद करें यह खराब अभ्यास है।

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

जे एस:

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

धन्यवाद, आपने क्या बदल दिया? : x aahhwww nvm मैं इसे अभी देखता हूं .. योरको पाल्मा के रूप में कोई आईडी सेट नहीं है। मेरे भगवान: x – Bart

+0

बटन के 'नाम' को 'ऑनक्लिक' फ़ंक्शन से अलग होना है या आपके मामले में मैं इसे ('name') छोड़ दूंगा। यदि आप आईडी द्वारा तत्व चाहते हैं, तो उन्हें एक आईडी दें, न कि नाम। – Michelangelo

2

आप दो समस्याओं यहाँ मिल गया है। एक स्पष्ट यह है कि आप id द्वारा फॉर्म इनपुट का संदर्भ प्राप्त करने का प्रयास करते हैं, लेकिन उन्हें कोई भी नहीं दिया (आपने उन्हें name दिया)। ठीक करने के लिए, या तो एक id को name विशेषता बदलने के लिए, या उन्हें संदर्भ के लिए प्रपत्र-विशिष्ट तरीके से उपयोग करते हैं, उदाहरण के लिए:

var TotalProductionTime = document.forms.frm1.TotalProductionTime 

दूसरा समस्या अधिक शातिर है और आप क्या डाल के निष्पादन के दायरे से कोई लेना देना नहीं है onclick विशेषताओं में। आप देखते हैं, आपके बटन को आपके फ़ंक्शन की तरह "गणना करें" नाम दिया गया है, और onclick विशेषता के संदर्भ में, इसके मूल रूप का उपयोग वैश्विक दायरे से पहले पहचानकर्ताओं को हल करने के लिए किया जाता है। तो गणना की गई फ़ंक्शन को कॉल करने के बजाय, आप बटन को स्वयं कॉल करने का प्रयास कर रहे हैं। ठीक है कि उन्हें अलग-अलग नामों के बजाय का उपयोग कर दे रही है, एचटीएमएल विशेषता संदर्भित window.Calculate स्पष्ट रूप से, या बहुत बेहतर है, जावास्क्रिप्ट में अपने ईवेंट हैंडलर को परिभाषित द्वारा:

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

हर आईडी पूर्णांक परिवर्तित किया जाना चाहिए। उदाहरण

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

फिर अपने .value` एक स्ट्रिंग रिटर्न