javascript - 计算每个输入具有不同价格的输入值。这个有更短的代码吗？(仅限javascript)

Question

下面的代码工作正常，但如果有 100 个输入怎么办？任何更短的方法来做到这一点？

function checkTotal() {
  var a = document.getElementById("sandwich").value;
  var b = document.getElementById("burger").value;
  var c = document.getElementById("cake").value;
  var d = document.getElementById("coffee").value;
  document.getElementById("total").value = parseInt(a) * 10 + parseInt(b) * 5 + parseInt(c) * 15 + parseInt(d) * 20;
}

<form role="form" name="listForm">
  <label>Sandwich</label>
  <input type="number" id="sandwich" value="0" onkeyup="checkTotal()"><br>

  <label>Burger</label>
  <input type="number" id="burger" value="0" onkeyup="checkTotal()"><br>

  <label>Cake</label>
  <input type="number" id="cake" value="0" onkeyup="checkTotal()"><br>

  <label>Coffee</label>
  <input type="number" id="coffee" value="0" onkeyup="checkTotal()"><br> Total: <input type="text" size="2" name="total" id="total" value="0" />
</form>

1)这里每个输入的商品都有不同的价格。 2)输入的值应该乘以给定的价格(例如，如果三明治的价格是:30，而用户输入值 2，则应该计算总计=价格*输入值。) 3) 我的代码工作正常，但上面的代码是正确的方法吗？ 4) 如果有 100 篇文章输入怎么办。是否有更短的代码或者我应该为每个代码创建变量？

Answer 1

what if there are 100 of article inputs. is there shorter code or should i create variable for each one?

你可以维护一张 map

var idPriceMap = {
  "sandwich" : 20,
  "burger" : 10,
  "cake" : 5,
  "coffee" : 10
};

您可以迭代它并使用 reduce

生成您的值

var output = Object.keys( idPriceMap ).reduce( function(a,b){
   var value = +document.getElementById( b ).value;
   a += value * idPriceMap[ b ];
   return a;
}, 0);
document.getElementById( "total" ).value = output;