在变量中将两个输入相加答案

【问题标题】：Adding two inputs together inside a variable在变量中将两个输入相加
【发布时间】：2014-01-27 23:25:23
【问题描述】：

在那里，

我不确定我能做到这一点。这是一些提供上下文的代码。

// API dictionary
$(document).ready(function(){

    var itemNameTitle = 'Task'
    var itemQtyTitle = 'Quantity'
    var itemRateTitle = 'Rate <span>($/hr)</span>'
    var itemPriceTitle = 'Price <span>($)</span>'
    var itemNameInput = '<input type="text" name="item-name-input" value="Mockups">'
    var itemQtyInput = '<input type="text" name="item-qty-input" value="1">'
    var itemRateInput = '<input type="text" name="item-rate-input" value="35">'
    var itemPriceCalc = 128 / 2

    $('#page').load('templates/default.html', function() {

            $this = $(this);
            $this.html($this.html().replace('%item-name-title%',itemNameTitle));
            $this.html($this.html().replace('%item-qty-title%',itemQtyTitle));
            $this.html($this.html().replace('%item-rate-title%',itemRateTitle));
            $this.html($this.html().replace('%item-price-title%',itemPriceTitle));
            $this.html($this.html().replace('%item-name-input%',itemNameInput));
            $this.html($this.html().replace('%item-qty-input%',itemQtyInput));
            $this.html($this.html().replace('%item-rate-input%',itemRateInput));
            $this.html($this.html().replace('%item-price-calc%',itemPriceCalc));

    });

});

我希望你能看到我在这里尝试做的事情。基本上我需要itemQtyInput 和itemRateInput 的values 相乘，然后发布到页面上的一个div。不幸的是，当我这样做时，它最终只会发布“NaN”。

有人知道我做错了什么吗？

【问题讨论】：

当 itemRateInput 是字符串变量时，如何应用除法？
@NitinVarpe 你能详细说明一下吗？我是 jQuery 的初学者。
您的问题中没有 jQuery。这只是简单的普通Javascript。您将两个变量设置为字符串。
@Barmar 我从完整的 jQuery 文档中提取了它。我已经发布了完整的代码。
首先在您之前的代码中，您似乎想要一个除法，但您的标题建议一个加法，但现在您要求一个乘法。也许您正在寻找的是一种灵感……？

标签： jquery math var

【解决方案1】：

一旦这些元素存在于您的页面中（因此，在 $("#page").load 回调之后），您可以像这样为它们获取 jQuery 对象：

var $qty  = $("input[name=item-qty-input]");
var $rate = $("input[name=item-rate-input]");

然后您可以通过.val 获取它们的值并将这些字符串解析为十进制浮点数：

var qty  = parseFloat($qty.val()); // Or a whole number: parseInt($qty.val(), 10)
var rate = parseFloat($rate.val());

当然，除法（或乘法或加法或您实际尝试做的任何事情）：

var itemPriceCalc = rate / qty; // Or + or *

通常您会等待用户事件执行此操作，但我不太确定您的页面在做什么。

【讨论】：

【解决方案2】：

字符串/字符串 = 不是数字

希望这是有道理的：

var value1 = document.getElementById('input1').value;
var value2 = document.getElementById('input1').value;

// parseInt converts the string to a integer
var result = parseInt(value1) / parseInt(value2);

【讨论】：

"String / String = Not A Number" 实际上，对于除法（以及乘法和减法以及许多其他数学运算），JavaScript 会强制转换类型。 "4" / "2" 是 2。当然，如果你使用+，它会连接，而不是添加。

【解决方案3】：

Here is a working example

您不想将文字标记放入变量中。您想引用所谓的选择器：

var itemQtyInput = $('input[name="item-qty-input"]').val();
var itemRateInput = $('input[name="item-rate-input"]').val();
var itemPriceCalc = itemRateInput / itemQtyInput;
alert(itemPriceCalc);

达到这种效果的东西应该有效。希望这会有所帮助！

【讨论】：

【解决方案4】：

试试这个...我试过这个...它正在工作...

    $(document).ready(function () {
                var itemQtyInput = '<input type="text" name="item-qty-input" value="1">'
                var itemRateInput = '<input type="text" name="item-rate-input" value="35">'
                var itemPriceCalc = parseFloat(parseInt($(itemRateInput).val()) / parseInt($(itemQtyInput).val()));

                alert(itemPriceCalc);
                $('div').val(itemPriceCalc);
            });

【讨论】：

有没有办法通过keyup事件来实现这个解决方案，这样当itemQtyInput或itemPriceCalc改变时，页面上的答案也会改变？希望这不是太多要求：S
@Vishal：这将使用临时输入元素，而不是 OP 的代码放在页面上的元素。
@JeremyBlazé：是的，有；我的回答（以及 wrxsti 和 barmar 的）向您展示了如何。只需将该代码放在 keyup 处理程序中即可。

【解决方案5】：

这里是 jQuery 的方式来做你想做的事：

var qty = parseInt($("input[name=item-qty-input]").val(), 10);
var rate = parseInt($("input[name=item-rate-input]").val(), 10);
var product = qty * rate;
$("#resultDiv").text(product);

【讨论】：