Question

我试着做一个有点简单的计算表：这里是带有脚本和表单元素的完整html页面。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Payback Calc</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<link rel="stylesheet" href="js/jquery-mobile-fluid960.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js">        </script>
<script>
function getvals(){
var homesq = $('#homesq').val();
var roofcasq = $('#roofcasq').val();
var costpsq = $('#costpsq').val();
var epahcc = $('#epahcc').val();
var narc = $('#narc').val();
var eeshc = $('#eeshc').val();
var cpg = $('#cpg').val();
var galneed = $('#galneed').val();
var pce = $('#pce').val();
var hcc=$('#hcc').val();
var eae=$('#eae').val();
var ees10=$('#ees10').val();
var ees15=$('#ees15').val();
var ees20=$('#ees20').val();
var epbpso=$('#epbpso').val();
var epbcac=$('#epbcac').val();
var eacs=$('#eacs').val();
var ts=$('#ts').val();
var epbop=$('#epbop').val();
var tc=$('#tc').val();


galneed = roofcasq/225;
pce = galneed * cpg;
hcc = homesq * epahcc;
eae = hcc * eeshc;
ees10 = eae * 10;
ees15 = eae * 15;
ees20 = eae * 20;
epbpso = pce / eae;
epbcac = roofcasq * costpsq;
eacs = narc * roofcasq;
ts = eae + eacs;
tc = pce + epbcac;
epbop = tc / ts;
}
 </script>
</head>
<body>
<div data-role="page" id="page">
  <div data-role="header">
    <h1>Header</h1>
  </div>
  <div data-role="content">

<table width="100%" align="center">
<tr height="100px"  >
<td><label  for="homesq"><h2>Home Square Footage:</h2></label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="homesq" id="homesq" placeholder="" data-role="none" ></td>
</tr>
<tr>
<td><label   for="roofcasq"><h2>Roof Coverage Area in Square Feet:</h2></label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="roofcasq" id="roofcasq" placeholder="" data-role="none"data-role="none" ></div></td>
</tr>
<tr >
<td><label   for="costpsq"><h2>Cost Per S.F. for Roof Cleaning & Application:</h2></label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="costpsq" id="costpsq" placeholder="" data-role="none" ></div></td>
</tr>
<tr>
<td><label  for="epahcc"><h2>U.S. EPA Average Residential Heating & Cooling Costs:</h2> </label></td>
<td width="25%"><input  style="font-size:30px;"type="text" name="epahcc" id="epahcc" placeholder="" data-role="none" ></div></td>
</tr>
<tr >
<td ><label  for="narc"><h2>U.S. National Average for Roof Cleaning:</h2></label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="narc" id="narc" placeholder="" data-role="none" ></div></td>
</tr>
<tr>
<td><label  for="eeshc"><h2>Estimated Energy Savings for Heating & Cooling:</h2></label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="eeshc" id="eeshc" placeholder="" data-role="none" ></div></td>
</tr>
<tr >
<td ><label  for="cpg"><h2>Cost Per Gallon for Nansulate Crystal: </h2></label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="cpg" id="cpg" placeholder="" data-role="none" ></div></td>
</tr>
<tr>
<td><label  for="galneed"><h2>Gallons Needed (includes 10% extra for loss):</h2></label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="galneed" id="galneed" placeholder="" data-role="none" ></div></td>
</tr>
<tr>
<td ><label  for="pce"><h2>Product Cost Estimate (does not include shipping):</h2> </label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="pce" id="pce" placeholder="" data-role="none" ></div></td>
</tr>
<tr>
<td ><label  for="hcc"><h2>Estimated Annual Heating & Cooling Costs:</h2> </label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="hcc" id="hcc" placeholder="" data-role="none" ></div></td>
</tr>
<tr>
<td ><label  for="eae"><h2>Estimated Annual Energy Savings:</h2> </label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="eae" id="eae" placeholder="" data-role="none" ></div></td>
</tr>
<tr>
<td ><label  for="ees10"><h2>Estimated Energy Savings Through 10-Year Warranty Period:</h2> </label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="ees10" id="ees10" placeholder="" data-role="none"></div></td>
</tr>
<tr>
<td ><label  for="ees15"><h2>Estimated Energy Savings Through 15 Years:</h2><p>(Expected lifespan is 10-20 years or more, depending upon climate)</p></label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="ees15" id="ees15" placeholder="" data-role="none" ></div></td>
</tr>
<tr>
<td ><label  for="ees20"><h2>Estimated Energy Savings Through 20-years:</h2> </label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="ees20" id="ees20" placeholder="" data-role="none" ></div></td>
</tr>
<tr>
<td ><label  for="epbpso"><h2>Estimated Payback on Product/Savings Only:</h2> </label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="epbpso" id="epbpso" placeholder="" data-role="none" ></div></td>
</tr>
<tr>
<td ><label  for="epbcac"><h2>Estimated Roof Cleaning & Application Cost:</h2> </label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="epbcac" id="epbcac" placeholder="" data-role="none" ></div></td>
</tr>
<tr>
<td ><label  for="eacs"><h2>Estimated Annual Cleaning Savings:</h2> </label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="eacs" id="eacs" placeholder="" data-role="none" ></div></td>
</tr>
<tr>
<td ><label  for="ts"><h2>Total Savings - Annual Energy Savings and Cleaning:</h2> </label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="ts" id="ts" placeholder="" data-role="none" ></div></td>
</tr>
<tr>
<td ><label  for="epbop"><h2>Estimated Payback on Product + Annual Cleaning:</h2> </label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="epbop" id="epbop" placeholder="" data-role="none" ></div></td>
</tr>
<tr>
<td ><label  for="tc"><h2>Total Cost of Product and Application:</h2> </label></td>
<td width="25%"><input style="font-size:30px;" type="text" name="tc" id="tc" placeholder="" data-role="none" ></div></td>
</tr>

</table>
 <a data-role="button" onClick="getvals()">calculate</a>
    <a data-role="button" onClick="console()">calculate</a>
 </div>
  <div data-role="footer">
    <h4>Footer</h4>

  </div>
</div>

</body>
</html>

控制台显示没有错误。这只是页面没有做任何事情。

我正在使用最新版本的jQuery mobile。

我做错了什么？

Answer 1

在使用HTML输入进行数学运算时，您需要做几件事：

修剪空格（$.trim是你的朋友，如果你正在使用jQuery）
转换为数字。使用parseInt(..., 10)表示整数，或parseFloat()否则。

当然，您还需要将计算值返回写入页面！

这对于Knockout JS来说是一个非常的好用，它允许您将表单输入绑定到数据模型，并在更改值时自动更新该表单。

Answer 2

你没有把你计算的值放在任何地方。您需要在页面上创建一些元素，并将其内容/值（取决于元素的类型）设置为您计算的元素。

当然，你需要有一些调用你的功能的元素。

不能做简单的jquery数学

2 个答案: