javascript计算成本然后显示在html页面中答案

【问题标题】：javascript to calculate cost then display in html pagejavascript计算成本然后显示在html页面中
【发布时间】：2014-02-20 15:50:57
【问题描述】：

刚刚学习 javascript，希望能帮助您实现以下目标：

访问者可以从三个下拉框中选择选项（尺寸、颜色、数量），然后按提交。 Javascript 将计算每个值，并将结果显示为 HTML 页面的 div 中的值。

EG，

小号=10 美元，中号=20 美元，大号=30 美元
黑色=3 美元，红色=5 美元，蓝色=7 美元
金额根据数量乘以上述金额

我将如何实现这一目标？使用脚本并更改 HTML 输出结果？

非常感谢！

【问题讨论】：

无需为您编写代码，您可以在选择的值中分配每个项目的美元成本，然后一旦做出所有选择，添加值并将结果总和分配给 div 的 innerHTML你已经选择了。
@todd.pund - 当你试图保持网站的预期精神并用有用的指针回答一个基本问题时，其他人会用他们的 JSfiddle 寻找低悬的代表来提供，这真是令人沮丧工作代码剪切和粘贴确保没有人学到任何有价值的东西。非常失望。无论如何，你得到了我的支持。

标签： javascript html

【解决方案1】：

<script type="text/javascript">
var qty=1;

function sanitize() {
  var o=document.getElementById('qty');
  if (!o) return;
  var newqty=parseInt(o.value);
  if (isNaN(newqty)) o.value=qty;
  else {
    qty=newqty;
    update();
  }
}

function update() {
  var total=0;
  var o=document.getElementById('size');
  if (!o) return;
  var tmp=parseInt(o.options[o.selectedIndex].value);
  if (isNaN(tmp)) return;
  total=tmp;
  o=document.getElementById('color');
  if (!o) return;
  var tmp=parseInt(o.options[o.selectedIndex].value);
  if (isNaN(tmp)) return;
  total*=tmp;
  o=document.getElementById('qty');
  if (!o) return;
  var tmp=parseInt(o.value);
  if (isNaN(tmp)) return;
  total*=tmp;
  o=document.getElementById('total');
  if (!o) return;
  o.innerHTML=tmp.toString();
}


</script>

<form action="javascript:return false;"> <!-- old browsers will freak out on select without form -->
Size: <select id="size" onchange="update();">
  <option value="10">small</option>
  <option value="20">medium</option>
  <option value="30">large</option>
</select><br>
Color: <select id="color" onchange="update();">
  <option value="3">black</option>
  <option value="5">red</option>
  <option value="7">blue</option>
</select><br>
Qty: <input type="text" id="qty" value="1" onchange="sanitize();">
<form>
Total $: <span id="total">0</span>

【讨论】：

This really isn't helpful
你真的应该阅读那个链接。该答案是低质量答案的完美示例；没有什么令人羡慕的。这是一个问答网站，而不是请求和代码转储网站。当然，OP 可能能够复制粘贴您的代码并使用它，但遇到类似问题的任何其他人都不会从中学到任何东西。
如果您认为我的答案是“低质量答案的完美示例”，您应该简单地投反对票 - 就这么简单。或者，您可以通过提供更好的答案来消耗您的精力。
我没有足够的代表来投反对票，也没有必要回答，因为对我投赞成票的原始帖子发表了完全合法的评论。它为 OP 提供了如何实现这一目标的指针，而不是为他们实现这一目标的大量代码。
好！所以我们在这里完成了！有 2 个人试图通过编写自我解释的示例代码来帮助 OP，他们现在都受到了应有的惩罚，试图保持网站的预期精神。为我工作！

【解决方案2】：

这个JSFiddle 应该让你开始：

<div>
    Size
    <select id="size">
        <option value="10">Small</option>
        <option value="20">Medium</option>
        <option value="30">Large</option>
    </select>
</div>
<div>
    Color
    <select id="color">
        <option value="3">Black</option>
        <option value="5">Red</option>
        <option value="7">Blue</option>
    </select>
</div>
<div>
    Quantity
    <input id="quantity" type="text" placeholder="Quantity" />
</div>
<div>
    Total cost: <span id="total"></span>
</div>

和

$('#size').change(function(){
    var size = parseInt($(this).val()),
        color = parseInt($('#color').val()),
        quantity = parseInt($('#quantity').val()),
        total = (size + color) * quantity;
    $('#total').html(total);
});

$('#color').change(function(){
    var size = parseInt($('#size').val()),
        color = parseInt($(this).val()),
        quantity = parseInt($('#quantity').val()),
        total = (size + color) * quantity;
    $('#total').html(total);
});

$('#quantity').change(function(){
    var size = parseInt($('#size').val()),
        color = parseInt($('#color').val()),
        quantity = parseInt($(this).val()),
        total = (size + color) * quantity;
    $('#total').html(total);
});

【讨论】：

这是 jQuery，OP 要求提供 javaScript。