计算不同的输入值，将它们相加并显示结果

Question

我想做一个“饮料柜台”。有3个输入会添加另一种饮料onclick。每种饮料的酒精含量都有特定的价值（var bier，var wein，var soju）。

因此，每次计数（点击）时，脚本都应该：

1. 在相应的value中计算input [有效]
2. 将所有数字和饮料相乘后乘以酒精值，因此added_up = bier_full + soju_full + wein_full;

如果看代码，您会发现我是个菜鸟。帮助将不胜感激。我想不出一种添加所有饮料*酒精的方法。值并将其显示在id="status"中。

HTML：

var full = 100;
var bier = 12.7;
var wein = 10;
var soju = 3.5;

status = document.getElementById("status");

var bier_c = parseInt(document.getElementById("beer").value);
var soju_c = parseInt(document.getElementById("soju").value);
var wein_c = parseInt(document.getElementById("wine").value);

var bier_i = document.getElementById("bier_info");
var soju_i = document.getElementById("soju_info");
var wein_i = document.getElementById("wein_info");

function reset() {
  bier_c = 0;
  soju_c = 0;
  wein_c = 0;
  document.getElementById("beer").value = "0";
  document.getElementById("soju").value = "0";
  document.getElementById("wine").value = "0";
};

function bier_s() {
  bier_c++;
  document.getElementById("beer").value = bier_c;
  bier_full = bier_c * bier;
  bier_i.innerHTML = bier_full;
  return bier_full;
};

function soju_s() {
  soju_c++;
  document.getElementById("soju").value = soju_c;
  soju_full = soju_c * soju;
  soju_i.innerHTML = soju_full;
  return soju_full;
};

function wein_s() {
  wein_c++;
  document.getElementById("wine").value = wein_c;
  wein_full = wein_c * wein;
  wein_i.innerHTML = wein_full;
  return wein_full;
};

added_up = bier_full + soju_full + wein_full;

alert(added_up);

<label>Beer</label><input id="beer" type="button" style="width: 50px;" onclick="bier_s();" value="0">
<label>Soju</label><input id="soju" type="button" style="width: 50px;" onclick="soju_s();" value="0">
<label>Wine</label><input id="wine" type="button" style="width: 50px;" onclick="wein_s();" value="0">
<br/>

<h2 class="c_red" id="status">Let's go!</h2>

<div class="am_info">
  <p>Bier: <span id="bier_info"></span></p>
  <p>Soju: <span id="soju_info"></span></p>
  <p>Wine: <span id="wein_info"></span></p>
</div>

Answer 1

只需添加一个每次其他方法运行= D即可运行的方法

var full = 100;
var bier = 12.7;
var wein = 10;
var soju = 3.5;

var bier_full = 0, soju_full = 0, wein_full = 0;

status = document.getElementById("status");

var bier_c = parseInt(document.getElementById("beer").value);
var soju_c = parseInt(document.getElementById("soju").value);
var wein_c = parseInt(document.getElementById("wine").value);

var bier_i = document.getElementById("bier_info");
var soju_i = document.getElementById("soju_info");
var wein_i = document.getElementById("wein_info");

function reset() {
  bier_c = 0;
  soju_c = 0;
  wein_c = 0;
  document.getElementById("beer").value = "0";
  document.getElementById("soju").value = "0";
  document.getElementById("wine").value = "0";
};

function bier_s() {
  bier_c++;
  document.getElementById("beer").value = bier_c;
  bier_full = bier_c * bier;
  bier_i.innerHTML = bier_full;
  addUp()
  return bier_full;
  
  
};

function soju_s() {
  soju_c++;
  document.getElementById("soju").value = soju_c;
  soju_full = soju_c * soju;
  soju_i.innerHTML = soju_full;
  addUp()
  return soju_full;
};

function wein_s() {
  wein_c++;
  document.getElementById("wine").value = wein_c;
  wein_full = wein_c * wein;
  wein_i.innerHTML = wein_full;
  addUp()
  return wein_full;
};

function addUp(){
  added_up = bier_full + soju_full + wein_full;

  alert(added_up);
}

<label>Beer</label><input id="beer" type="button" style="width: 50px;" onclick="bier_s();" value="0">
<label>Soju</label><input id="soju" type="button" style="width: 50px;" onclick="soju_s();" value="0">
<label>Wine</label><input id="wine" type="button" style="width: 50px;" onclick="wein_s();" value="0">
<br/>

<h2 class="c_red" id="status">Let's go!</h2>

<div class="am_info">
  <p>Bier: <span id="bier_info"></span></p>
  <p>Soju: <span id="soju_info"></span></p>
  <p>Wine: <span id="wein_info"></span></p>
</div>