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

正在学习javascript，并希望获得以下帮助：

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

例如

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

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

非常感谢

这应该让您开始：

<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>

变量数量=1；
函数sanitize（）{
var o=document.getElementById（“数量”）；
如果（！o）返回；
var newqty=parseInt（o.value）；
如果（isNaN（newqty））o.value=数量；
否则{
数量=新增数量；
更新（）；
}
}
函数更新（）{
var合计=0；
var o=document.getElementById（'size'）；
如果（！o）返回；
var tmp=parseInt（o.options[o.selectedIndex].value）；
if（isNaN（tmp））返回；
总数=tmp；
o=document.getElementById（'color'）；
如果（！o）返回；
var tmp=parseInt（o.options[o.selectedIndex].value）；
if（isNaN（tmp））返回；
总数*=tmp；
o=document.getElementById（“数量”）；
如果（！o）返回；
var tmp=parseInt（o.value）；
if（isNaN（tmp））返回；
总数*=tmp；
o=document.getElementById（'total'）；
如果（！o）返回；
o、 innerHTML=tmp.toString（）；
}
尺寸：
小的
中等的
大的


颜色：
黑色
红色
蓝色


数量：
总数$：0

无需为您编写代码，您可以在select的值中分配每个项目的美元成本，然后在完成所有选择后，添加这些值并将结果总和分配到您选择的div的innerHTML。@todd.pund-当您试图保持站点的预期精神，并用有用的指针回答一个基本问题，而其他人则用JSfiddle寻找低挂rep以提供可剪切和粘贴的工作代码时，这令人沮丧没有人能学到任何有价值的东西。非常令人失望。无论如何，你得到了我的支持票。这是jQuery，OP要求提供javaScript。你真的应该阅读那个链接。这个答案是低质量答案的完美例子；这一点也不令人羡慕。这是一个问答网站，不是请求和代码转储网站。当然，OP可能能够复制粘贴您的代码并使用它，但任何其他有类似问题的人都不会从中学习到任何东西。如果您认为我的答案是“一个低质量答案的完美示例”，您应该简单地否决它-就这么简单。另外，你也可以通过给出一个更好的答案来消耗你的精力。我没有足够的代表投反对票，也没有必要回答，因为在我投赞成票的原始帖子上发表了完全合理的评论。它提供了如何实现这一点的指针，而不是为他们提供实现这一点的大量代码。很好！我们到此为止！有两个人试图通过编写自我解释的示例代码来帮助OP，他们两人现在都受到了应有的惩罚，试图保持网站的预期精神。为我工作！

$('#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);
});

<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>