Counting different input values, add them and show result

Question

I want to make a "drink counter". There are 3 inputs which add another drink onclick. Every drink has a specific value in alcohol (var bier, var wein, var soju).

So on every count up (click), the script is supposed to:

1. count up the value in the respective input [this works]
2. add up all the numbers and drinks multiplied by their alcohol value, so added_up = bier_full + soju_full + wein_full;

If you look at the code, you will notice that I'm quite the noob. Help would be much appreciated. I can't think of a way to add all the drinks*alc. values up and display them in the 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

just add a method that runs every time the other methods runs =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>