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

Question

我想做一个“饮料柜台”。有 3 个输入可以添加另一种饮料 onclick。每种饮料都有特定的酒精含量(var bier、var wein、var soju)。

所以在每次计数(点击)时，脚本应该:

1. 计算相应输入中的值 [这有效]
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>