Question

javascript新手。非常希望生成一个简单的计算器，它使用三个输入和4个固定值来生成和报告“峰值功率输出”值。代码如下：

<script type="text/javascript">
    "use strict";
    /*jslint browser:true */
    function calculate() {
    var vj, hgt, wgt, result, peakresult;
    vj = document.getElementById('vjump');
    hgt = document.getElementById('height');
    wgt = document.getElementById('weight');
    result = document.getElementById('peakresult');
    peakresult = (78.6 * vj) + (60.3 * hgt) - (15.3 * wgt) - 1308;
    result.value = peakresult;
}
</script>

HTML：

<td>
    <input id="vj" type="text" oninput="calculate()" />
</td>
<td>
    <input id="hgt" type="text" oninput="calculate()" />
</td>
<td>
    <input id="wgt" type="text" oninput="calculate()" />
</td>

在带有表的html页面中显示输入和结果，输入有效，但不是结果。

Answer 1

你有jquery标记，所以这是一个jQuery版本。

<script type="text/javascript">
"use strict";
/*jslint browser:true */
function calculate() {
    var vj, hgt, wgt, result, peakresult;
    vj = $('#vj').val();
    hgt = $('#hgt').val();
    wgt = $('#wgt').val();
    result = $('#peakresult');
    peakresult = (78.6 * vj) + (60.3 * hgt) - (15.3 * wgt) - 1308;
    result.val(peakresult);
}

$(document).ready(function() {
    $('input[type="text"]').on('blur', function() {
        calculate();
    });
});
</script>

这假设您的HTML中也有<input type="text" id="peakresult" />。

我添加了一个jQuery事件处理程序，当用户离开输入字段时，它会调用calculate按钮。这比在字段标记中使用处理程序更有用。

Answer 2

如果你更换

vj = document.getElementById('vjump');
hgt = document.getElementById('height');
wgt = document.getElementById('weight');

通过

vj = Number(document.getElementById('vjump').value);
hgt = Number(document.getElementById('height').value);
wgt = Number(document.getElementById('weight').value);

它应该有用。

但没有检查输入是否正确。

（修改）

以下代码正常运行（在Chrome上测试）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
    function calculate() {
        var vj, hgt, wgt, result, peakresult;
        vj = Number(document.getElementById('vj').value);
        hgt = Number(document.getElementById('hgt').value);
        wgt = Number(document.getElementById('wgt').value);
        result = document.getElementById('peakresult');
        peakresult = (78.6 * vj) + (60.3 * hgt) - (15.3 * wgt) - 1308;
        result.value = peakresult;
    }
    </script>
</head>
<body>
    <td>
        <input id="vj" type="text" oninput="calculate()" value="1"/>
    </td>
    <td>
        <input id="hgt" type="text" oninput="calculate()" value="1"/>
    </td>
    <td>
        <input id="wgt" type="text" oninput="calculate()" value="1"/>
    </td>
    <td>
        <input id="peakresult" type="text" value="0"/>
    </td>

</body>

Answer 3

您可以使用一元加号+来将值转换为数字，然后对它们执行操作：

function add() {
  var a = +document.getElementById('firstOperand').value;
  var b = +document.getElementById('secondOperand').value;
  return a + b;
}

此外，您的html建议您使用oninput在每次击键时调用计算功能。用户离开字段后，您可以使用onblur调用计算功能。

Answer 4

您可能需要将解析文本转换为整数

    parseInt(val);

检查此实时样本
http://jsfiddle.net/VdrWL/2/

希望它有所帮助。

脚本没有产生结果

4 个答案: