在 HTML 中添加数字变量

Question

新网站，但已经使用了一段时间 - 帮助很大！

我正在尝试从输入中添加两个变量；示例 2 + 2 但我一直得到答案 22 而不是 4.

一旦我解决了这个问题，我将需要一个包含 5-6 个变量和几个答案的表单。

请您帮忙，我确信这是一个非常简单的答案（我正在学习编程）。

这是我的...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transititonal//EN"
""http://www.w3.org/TR/XHTML1/DTD/xhtml1-transitional.dtd">

<html>
<head></head>
<body>


<form name="profitcalc">

    <table border="1" width="600" height="200" cellpadding="10" cellspacing="3">

        <tr><th colspan="2">Profit Calculator</th></tr>


        <td>

            Dollar Rate <input type="number" name="xrate" id="input" onchange="calculate();"/>
            <br>
            Marketplace Fee <input type="number" name="marketfee" id="input" onchange="calculate();"/>

        </td>


        <td><input type="number" name="profit" id="output"></td>

    <table>

</form>



<script type="text/javascript">

    function calculate() {

    var vxrate = document.profitcalc.xrate.value;
    var vmarketfee = document.profitcalc.marketfee.value;

    var vanswer = vxrate + vmarketfee;

    document.profitcalc.profit.value = vanswer;

    }

</script>



</body>
</html>

Answer 1

您从 <input> 字段读取的值是字符串，因此 Javascript 将它们连接起来，因此得到 22 结果。

在使用 parseFloat()

执行算术之前，您需要将它们强制为数值

<script type="text/javascript">

    function calculate() {

    var vxrate = parseFloat(document.profitcalc.xrate.value);
    var vmarketfee = parseFloat(document.profitcalc.marketfee.value);

    var vanswer = vxrate + vmarketfee;

    document.profitcalc.profit.value = vanswer;

    }

</script>

[编辑] 修改为使用 parseFloat() 而不是 parseInt()，因为此代码看起来需要小数。

在 HTML 中添加数字变量

Add number variables in HTML

html

variables

numbers