Question

我对JS有点新鲜。

我试图获取3个文本字段并添加它们，然后将它们的值乘以一个下拉字段，其中包含一个百分比。一旦完成，我希望它用值填充最终文本字段。

到目前为止，我甚至无法将文本显示在最终字段中，更不用说将它们添加到一起了。如果有人能帮我指出正确的方向，我会很感激。

Our Buying Cost:
<input id="buying_cost" name="buying_cost" type="text" />
<br/>Our Shipping Cost:
<input id="shipping_cost" name="shipping_cost" type="text" />
<br/>Our Tax Cost:
<input id="tax_cost" name="tax_cost" type="text" />
<br/>Our Markup:
<select id="markup" name="markup" value="">
    <option value="0">0%</option>
    <option value="10">10%</option>
    <option value="20">20%</option>
    <option value="30">30%</option>
    <option value="40">40%</option>
    <option value="50">50%</option>
    <option value="60">60%</option>
    <option value="70">70%</option>
    <option value="80">80%</option>
    <option value="90">90%</option>
    <option value="100">100%</option>
</select>
<br/>
<p>New Selling Price:</p>
<input type="text" id="new_sell_price" name="new_sell_price" value="">





$("#buying_cost,#shipping_cost,#tax_cost,#markup).change(function () 
{
    var addressArray = [$("#buying_cost").val(), $("#shipping_cost").val(), $("#tax_cost").val(), $("#markup").val()];
    $("#new_sell_price").text(addressArray.join(' '));//<--I would like this to be adding all the values
}

);

我在这个JSFiddle

中包含了这里的工作

jsfiddle.net/new2programming/hy99yu2m /

感谢您的帮助！

Answer 1

这是一个简洁明了的问题解决方案：on JSFiddle

但请注意，如果您不确切了解它的作用，则不应复制粘贴此代码！

首先，注册事件：

// I recommend jQuery.on(...) on the document
$(document).on('input', 'input', calculate);
$(document).on('change', 'select,input', calculate);
// use the 'input' event for a live update
// and the 'change' value for a secure update

（如果您愿意，可以使用元素的jQuery选择器替换＆＃39;输入＆＃39;以及选择，输入＆＃39;阅读documentation）

在下一步中，您将使用所有值填充数组：

var values = [
    $("#buying_cost").val(), 
    $("#shipping_cost").val(), 
    $("#tax_cost").val(), 
    $("#markup").val()
];

现在您可以添加数组中的所有值：

var total = eval( values.join('+') );
// the eval function calculates the given string (generated by the join function)

在最后一步，您设置计算值：

$("#new_sell_price").val(total);
// use 'val(...)' and not 'text(...)' because you want to set the value and not the text!

JavaScript数学运算和输入文本字段实时

1 个答案: