获取输入数字值与JS

我有一些问题与JS计算一些东西，并从输入字段（数字）获得正确的值。当我使用此代码时，它不显示任何内容。那么我的JS有什么问题？我需要包含一个Jquery文件吗？获取输入数字值与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>

在此先感谢。

来源

2015-02-24 Bart

'.value'返回一个字符串。使用'parseInt（x，10）'或'parseFloat'。 – 2015-02-24 12:23:08

您正在使用'getElementById'并且您没有设置任何ID。 – 2015-02-24 12:26:27

[使用JS获取的值时，它包含非数字字符]（http://stackoverflow.com/questions/15627341/get-value-of-input-type-number -with-js-when-it-contains-non-numeric-characte） – 2015-02-24 12:42:03

你在你的HTML有一些失误，但在这里工作小提琴：Fiddle 你，你是试图通过他们的ID来获得元素，但你不给他们你给他们一个名称的ID。也停止使用内联JavaScript调用这是不好的做法。

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

来源

2015-02-24 12:26:07 Michelangelo

谢谢，你有什么改变？：x aahhwww nvm我现在看到了..没有ID的设置就像Yerko Palma提到的那样。我的上帝：x – Bart 2015-02-24 12:31:01

按钮的名称必须与'onclick'函数有所不同，否则我会将其保留（'name'）。此外，如果你想通过ID的元素，给他们一个ID而不是一个名字。 – Michelangelo 2015-02-24 12:38:14

您在这里有两个问题。一个显而易见的是，你试图通过id获得对表单输入的引用，但没有给出它们（你给他们一个name）。要解决，要么改变name属性的id，或使用特定形状的方式来引用它们，例如：

var TotalProductionTime = document.forms.frm1.TotalProductionTime

第二个问题是更加凶狠，有与你把执行的范围做在onclick属性。您会发现，您的按钮与您的函数一样被命名为“计算”，并且在onclick属性的上下文中，其父窗体用于在全局范围之前解析标识符。所以不是调用名为Calculate的函数，而是尝试调用按钮本身。修正了通过给他们不同的名字，引用window.Calculate明确，或更好，在JavaScript中定义的事件处理程序，而不是使用HTML属性：

document.forms.frm1.Calculate.onclick=Calculate

来源

2015-02-24 12:39:00 Touffy

每个ID必须转换为整数。例如

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

那么你准备好去

来源

2017-10-10 05:47:37

获取输入数字值与JS

回答

相关问题