Question 160980 in Html Question posted in
Some basic documentation can be found here.

Can HTML bind enter key to a button?

I have made a Cosmetic item calculater, it works fine functionalty-wise but I want to add the feature that pressing the enter key does the calculation. Right now in the program I have to manually click on the "rechnen" button to calculate. Any ideas on what I can do to not always have to use the mouse to calculate?

I have tried using from W3schools the Example they use and implementing the code into mine but it doesn’t seem to work.

var Waschlotion = 1.30;
var Haarshampoo = 1.50;
var Bodylotion = 3;
var Wundschutzcreme = 4.80;
var Deospray = 1.80;
var Zahncreme = 1.50;
var Zahnbuerste = 1;
var Zahnspuellbecher = 1.25;
var Zahnhaftcreme = 3.20;
var Zahnreinigunstabs = 3.20;
var Rasierklingen = 2.49;
var RasiererMitKlingen = 4.50;
var Rasierschaum = 1.40;
var Einwegrasierer = 2;
var ZahnreinigunsBecher = 5;
var Mullkompressen = 6;

let Sum;

let WaschlotionAmount;
let HaarshampooAmount;
let BodylotionAmount;
let WundschutzcremeAmount;
let DeosprayAmount;
let ZahncremeAmount;
let ZahnbuersteAmount;
let ZahnspuellbecherAmount;
let ZahnhaftcremeAmount;
let ZahnreinigunstabsAmount;
let RasierklingenAmount;
let RasiererMitKlingenAmount;
let RasierschaumAmount;
let EinwegrasiererAmount;
let ZahnreinigunsBecherAmount;
let MullkompressenAmount;

function Calculate() {
  if (Sum != 0) {
    Sum = 0;
  }
  let WaschlotionAmount = document.getElementById("WaschlotionAmount").value;
  let HaarshampooAmount = document.getElementById("HaarshampooAmount").value;
  let BodylotionAmount = document.getElementById("BodylotionAmount").value;
  let WundschutzcremeAmount = document.getElementById("WundschutzcremeAmount").value;
  let DeosprayAmount = document.getElementById("DeosprayAmount").value;
  let ZahncremeAmount = document.getElementById("ZahncremeAmount").value;
  let ZahnbuersteAmount = document.getElementById("ZahnbuersteAmount").value;
  let ZahnspuellbecherAmount = document.getElementById("ZahnspuellbecherAmount").value;
  let ZahnhaftcremeAmount = document.getElementById("ZahnhaftcremeAmount").value;
  let ZahnreinigunstabsAmount = document.getElementById("ZahnreinigunstabsAmount").value;
  let RasierklingenAmount = document.getElementById("RasierklingenAmount").value;
  let RasiererMitKlingenAmount = document.getElementById("RasiererMitKlingenAmount").value;
  let RasierschaumAmount = document.getElementById("RasierschaumAmount").value;
  let EinwegrasiererAmount = document.getElementById("EinwegrasiererAmount").value;
  let ZahnreinigunsBecherAmount = document.getElementById("ZahnreinigunsBecherAmount").value;
  let MullkompressenAmount = document.getElementById("MullkompressenAmount").value;

  Sum = (Waschlotion * WaschlotionAmount) + (Haarshampoo * HaarshampooAmount) + (Bodylotion * BodylotionAmount) +
    (Wundschutzcreme * WundschutzcremeAmount) + (Deospray * DeosprayAmount) + (Zahncreme * ZahncremeAmount) +
    (Zahnbuerste * ZahnbuersteAmount) + (Zahnspuellbecher * ZahnspuellbecherAmount) + (Zahnhaftcreme * ZahnhaftcremeAmount) +
    (Zahnreinigunstabs * ZahnreinigunstabsAmount) + (Rasierklingen * RasierklingenAmount) + (RasiererMitKlingen * RasiererMitKlingenAmount) +
    (Rasierschaum * RasierschaumAmount) + (Einwegrasierer * EinwegrasiererAmount) + (ZahnreinigunsBecher * ZahnreinigunsBecherAmount) + (Mullkompressen * MullkompressenAmount);


  var roundedString = Sum.toFixed(2);
  var rounded = Number(roundedString);
  document.getElementById("Sum").innerHTML = rounded;

  var input = document.getElementById("Rechnen");
  Rechnen.addEventListener("keypress",
    function(event) {
      if (event.key === "Enter") {
        event.preventDefault();
        document.getElementById("Rechnen").click();
      }
    });
}



function ClearAll() {
  document.getElementById("WaschlotionAmount").value = "";
  document.getElementById("HaarshampooAmount").value = "";
  document.getElementById("BodylotionAmount").value = "";
  document.getElementById("WundschutzcremeAmount").value = "";
  document.getElementById("DeosprayAmount").value = "";
  document.getElementById("ZahncremeAmount").value = "";
  document.getElementById("ZahnbuersteAmount").value = "";
  document.getElementById("ZahnspuellbecherAmount").value = "";
  document.getElementById("ZahnhaftcremeAmount").value = "";
  document.getElementById("ZahnreinigunstabsAmount").value = "";
  document.getElementById("RasierklingenAmount").value = "";
  document.getElementById("RasiererMitKlingenAmount").value = "";
  document.getElementById("RasierschaumAmount").value = "";
  document.getElementById("EinwegrasiererAmount").value = "";
  document.getElementById("MullkompressenAmount").value = "";
  document.getElementById("ZahnreinigunsBecherAmount").value = "";
}
td {
  text-align: center;
  font-weight: bold;
}

table {
  text-align: center;
}

.center {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.buttons {
  margin-top: 20px;
  margin-left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

button {
  cursor: pointer;
}

#Rechnen {
  margin-right: 10px;
}
<table class="center">
  <tr>
    <th>Kosmetikartikel</th>
    <th>Menge</th>
  </tr>
  <tr>
    <td>Waschlotion</td>
    <td><input id="WaschlotionAmount"></td>
    <td> 1,30 </td>
  </tr>
  <tr>
    <td>Haarshampoo</td>
    <td><input id="HaarshampooAmount"></td>
    <td>1,50</td>
  </tr>
  <tr>
    <td>Bodylotion</td>
    <td><input id="BodylotionAmount"></td>
    <td>3</td>
  </tr>
  <tr>
    <td>Wundschutzcreme</td>
    <td><input id="WundschutzcremeAmount"></td>
    <td>4,80</td>
  </tr>
  <tr>
    <td>Deospray</td>
    <td><input id="DeosprayAmount"></td>
    <td>1,80</td>
  </tr>
  <tr>
    <td>Zahncreme</td>
    <td><input id="ZahncremeAmount"></td>
    <td>1,50</td>
  </tr>
  <tr>
    <td>Zahnbürste</td>
    <td><input id="ZahnbuersteAmount"></td>
    <td>1</td>
  </tr>
  <tr>
    <td>Zahnspüllbecher</td>
    <td><input id="ZahnspuellbecherAmount"></td>
    <td>1,25</td>
  </tr>
  <tr>
    <td>Zahnhaftcreme</td>
    <td><input id="ZahnhaftcremeAmount"></td>
    <td>3,20</td>
  </tr>
  <tr>
    <td>Zahnreinigunstabs</td>
    <td><input id="ZahnreinigunstabsAmount"></td>
    <td>3,20</td>
  </tr>
  <tr>
    <td>Rasierklingen</td>
    <td><input id="RasierklingenAmount"></td>
    <td>2,49</td>
  </tr>
  <tr>
    <td>Rasierer mit Klingen</td>
    <td><input id="RasiererMitKlingenAmount"></td>
    <td>4.50</td>
  </tr>
  <tr>
    <td>Rasierschaum</td>
    <td><input id="RasierschaumAmount"></td>
    <td>1,40</td>
  </tr>
  <tr>
    <td>Einwegrasierer</td>
    <td><input id="EinwegrasiererAmount"></td>
    <td>2</td>
  </tr>
  <tr>
    <td>Zahnreinigunsbecher</td>
    <td><input id="ZahnreinigunsBecherAmount"></td>
    <td>5</td>
  </tr>
  <tr>
    <td>Mullkompressen</td>
    <td><input id="MullkompressenAmount"></td>
    <td>6</td>
  </tr>
  <tr>
    <td><b>Gesamtpreis</b></td>
    <td><b id="Sum"></b></td>
  </tr>
</table>
<div class="buttons">
  <button id="Rechnen" onclick="Calculate()">Rechnen</button>
  <button id="Clear All" onclick="ClearAll()">Clear All</button>
</div>
Tags:

4

Answers


  1. 0

    I would simplify this and use a form with a submit event. The submit will calculate and so will inputting anything.

    I added a reset and changed the quantity field to type="number"

    I am using

    window.addEventListener("DOMContentLoaded", () => { // on page load
  const form = document.getElementById("myForm");
  const sumOutput = document.getElementById("Sum");
  const sumForm = () => {
    const sum = [...form.querySelectorAll("tbody tr")]
      .map(row => { // make an array of values
        let price = row.querySelectorAll("td")[2].textContent.trim() || 0;
        const qty = row.querySelector("input").value || 0;
        return price.replace(/,/, ".") * qty;
      })
      .reduce((a, b) => a + b); // sum the array
    sumOutput.innerHTML = sum.toFixed(2).replace(/./,","); // replace the comma
  };
  form.addEventListener("input", sumForm); // delegating the input
  form.addEventListener("submit", (e) => {
    e.preventDefault(); // stop submission - remove this if you want to submit too - possibly with a setTimeout
    sumForm();
  });
  form.addEventListener("reset", (e) => {
    sumOutput.innerHTML = "";
  });
});
    td {
  text-align: center;
  font-weight: bold;
}

table {
  text-align: center;
}

.center {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.buttons {
  margin-top: 20px;
  margin-left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

button {
  cursor: pointer;
}

#Rechnen {
  margin-right: 10px;
}
    <form id="myForm">
  <table class="center">
    <thead>
      <tr>
        <th>Kosmetikartikel</th>
        <th>Menge</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Waschlotion</td>
        <td><input type="number" id="WaschlotionAmount"></td>
        <td> 1,30 </td>
      </tr>
      <tr>
        <td>Haarshampoo</td>
        <td><input type="number" id="HaarshampooAmount"></td>
        <td>1,50</td>
      </tr>
      <tr>
        <td>Bodylotion</td>
        <td><input type="number" id="BodylotionAmount"></td>
        <td>3</td>
      </tr>
      <tr>
        <td>Wundschutzcreme</td>
        <td><input type="number" id="WundschutzcremeAmount"></td>
        <td>4,80</td>
      </tr>
      <tr>
        <td>Deospray</td>
        <td><input type="number" id="DeosprayAmount"></td>
        <td>1,80</td>
      </tr>
      <tr>
        <td>Zahncreme</td>
        <td><input type="number" id="ZahncremeAmount"></td>
        <td>1,50</td>
      </tr>
      <tr>
        <td>Zahnbürste</td>
        <td><input type="number" id="ZahnbuersteAmount"></td>
        <td>1</td>
      </tr>
      <tr>
        <td>Zahnspüllbecher</td>
        <td><input type="number" id="ZahnspuellbecherAmount"></td>
        <td>1,25</td>
      </tr>
      <tr>
        <td>Zahnhaftcreme</td>
        <td><input type="number" id="ZahnhaftcremeAmount"></td>
        <td>3,20</td>
      </tr>
      <tr>
        <td>Zahnreinigunstabs</td>
        <td><input type="number" id="ZahnreinigunstabsAmount"></td>
        <td>3,20</td>
      </tr>
      <tr>
        <td>Rasierklingen</td>
        <td><input type="number" id="RasierklingenAmount"></td>
        <td>2,49</td>
      </tr>
      <tr>
        <td>Rasierer mit Klingen</td>
        <td><input type="number" id="RasiererMitKlingenAmount"></td>
        <td>4.50</td>
      </tr>
      <tr>
        <td>Rasierschaum</td>
        <td><input type="number" id="RasierschaumAmount"></td>
        <td>1,40</td>
      </tr>
      <tr>
        <td>Einwegrasierer</td>
        <td><input type="number" id="EinwegrasiererAmount"></td>
        <td>2</td>
      </tr>
      <tr>
        <td>Zahnreinigunsbecher</td>
        <td><input type="number" id="ZahnreinigunsBecherAmount"></td>
        <td>5</td>
      </tr>
      <tr>
        <td>Mullkompressen</td>
        <td><input type="number" id="MullkompressenAmount"></td>
        <td>6</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td><b>Gesamtpreis</b></td>
        <td><b id="Sum"></b></td>
      </tr>
    </tfoot>
  </table>
  <div class="buttons">
    <button type="submit">Rechnen</button>
    <button type="reset">Clear All</button>
  </div>
</form>
    Login or Signup to reply.
  2. 0 
    window.addEventListener('keydown', e => {
  if (e.key === 'Enter') Calculate()
})

    var Waschlotion = 1.30;
var Haarshampoo = 1.50;
var Bodylotion = 3;
var Wundschutzcreme = 4.80;
var Deospray = 1.80;
var Zahncreme = 1.50;
var Zahnbuerste = 1;
var Zahnspuellbecher = 1.25;
var Zahnhaftcreme = 3.20;
var Zahnreinigunstabs = 3.20;
var Rasierklingen = 2.49;
var RasiererMitKlingen = 4.50;
var Rasierschaum = 1.40;
var Einwegrasierer = 2;
var ZahnreinigunsBecher = 5;
var Mullkompressen = 6;

let Sum;

let WaschlotionAmount;
let HaarshampooAmount;
let BodylotionAmount;
let WundschutzcremeAmount;
let DeosprayAmount;
let ZahncremeAmount;
let ZahnbuersteAmount;
let ZahnspuellbecherAmount;
let ZahnhaftcremeAmount;
let ZahnreinigunstabsAmount;
let RasierklingenAmount;
let RasiererMitKlingenAmount;
let RasierschaumAmount;
let EinwegrasiererAmount;
let ZahnreinigunsBecherAmount;
let MullkompressenAmount;

function Calculate() {
  if (Sum != 0) {
    Sum = 0;
  }
  let WaschlotionAmount = document.getElementById("WaschlotionAmount").value;
  let HaarshampooAmount = document.getElementById("HaarshampooAmount").value;
  let BodylotionAmount = document.getElementById("BodylotionAmount").value;
  let WundschutzcremeAmount = document.getElementById("WundschutzcremeAmount").value;
  let DeosprayAmount = document.getElementById("DeosprayAmount").value;
  let ZahncremeAmount = document.getElementById("ZahncremeAmount").value;
  let ZahnbuersteAmount = document.getElementById("ZahnbuersteAmount").value;
  let ZahnspuellbecherAmount = document.getElementById("ZahnspuellbecherAmount").value;
  let ZahnhaftcremeAmount = document.getElementById("ZahnhaftcremeAmount").value;
  let ZahnreinigunstabsAmount = document.getElementById("ZahnreinigunstabsAmount").value;
  let RasierklingenAmount = document.getElementById("RasierklingenAmount").value;
  let RasiererMitKlingenAmount = document.getElementById("RasiererMitKlingenAmount").value;
  let RasierschaumAmount = document.getElementById("RasierschaumAmount").value;
  let EinwegrasiererAmount = document.getElementById("EinwegrasiererAmount").value;
  let ZahnreinigunsBecherAmount = document.getElementById("ZahnreinigunsBecherAmount").value;
  let MullkompressenAmount = document.getElementById("MullkompressenAmount").value;

  Sum = (Waschlotion * WaschlotionAmount) + (Haarshampoo * HaarshampooAmount) + (Bodylotion * BodylotionAmount) +
    (Wundschutzcreme * WundschutzcremeAmount) + (Deospray * DeosprayAmount) + (Zahncreme * ZahncremeAmount) +
    (Zahnbuerste * ZahnbuersteAmount) + (Zahnspuellbecher * ZahnspuellbecherAmount) + (Zahnhaftcreme * ZahnhaftcremeAmount) +
    (Zahnreinigunstabs * ZahnreinigunstabsAmount) + (Rasierklingen * RasierklingenAmount) + (RasiererMitKlingen * RasiererMitKlingenAmount) +
    (Rasierschaum * RasierschaumAmount) + (Einwegrasierer * EinwegrasiererAmount) + (ZahnreinigunsBecher * ZahnreinigunsBecherAmount) + (Mullkompressen * MullkompressenAmount);


  var roundedString = Sum.toFixed(2);
  var rounded = Number(roundedString);
  document.getElementById("Sum").innerHTML = rounded;

  var input = document.getElementById("Rechnen");
  Rechnen.addEventListener("keypress",
    function(event) {
      if (event.key === "Enter") {
        event.preventDefault();
        document.getElementById("Rechnen").click();
      }
    });
}



function ClearAll() {
  document.getElementById("WaschlotionAmount").value = "";
  document.getElementById("HaarshampooAmount").value = "";
  document.getElementById("BodylotionAmount").value = "";
  document.getElementById("WundschutzcremeAmount").value = "";
  document.getElementById("DeosprayAmount").value = "";
  document.getElementById("ZahncremeAmount").value = "";
  document.getElementById("ZahnbuersteAmount").value = "";
  document.getElementById("ZahnspuellbecherAmount").value = "";
  document.getElementById("ZahnhaftcremeAmount").value = "";
  document.getElementById("ZahnreinigunstabsAmount").value = "";
  document.getElementById("RasierklingenAmount").value = "";
  document.getElementById("RasiererMitKlingenAmount").value = "";
  document.getElementById("RasierschaumAmount").value = "";
  document.getElementById("EinwegrasiererAmount").value = "";
  document.getElementById("MullkompressenAmount").value = "";
  document.getElementById("ZahnreinigunsBecherAmount").value = "";
}

window.addEventListener('keydown', e => {
  if (e.key === 'Enter') Calculate()
})
    td {
  text-align: center;
  font-weight: bold;
}

table {
  text-align: center;
}

.center {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.buttons {
  margin-top: 20px;
  margin-left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

button {
  cursor: pointer;
}

#Rechnen {
  margin-right: 10px;
}
    <table class="center">
  <tr>
    <th>Kosmetikartikel</th>
    <th>Menge</th>
  </tr>
  <tr>
    <td>Waschlotion</td>
    <td><input id="WaschlotionAmount"></td>
    <td> 1,30 </td>
  </tr>
  <tr>
    <td>Haarshampoo</td>
    <td><input id="HaarshampooAmount"></td>
    <td>1,50</td>
  </tr>
  <tr>
    <td>Bodylotion</td>
    <td><input id="BodylotionAmount"></td>
    <td>3</td>
  </tr>
  <tr>
    <td>Wundschutzcreme</td>
    <td><input id="WundschutzcremeAmount"></td>
    <td>4,80</td>
  </tr>
  <tr>
    <td>Deospray</td>
    <td><input id="DeosprayAmount"></td>
    <td>1,80</td>
  </tr>
  <tr>
    <td>Zahncreme</td>
    <td><input id="ZahncremeAmount"></td>
    <td>1,50</td>
  </tr>
  <tr>
    <td>Zahnbürste</td>
    <td><input id="ZahnbuersteAmount"></td>
    <td>1</td>
  </tr>
  <tr>
    <td>Zahnspüllbecher</td>
    <td><input id="ZahnspuellbecherAmount"></td>
    <td>1,25</td>
  </tr>
  <tr>
    <td>Zahnhaftcreme</td>
    <td><input id="ZahnhaftcremeAmount"></td>
    <td>3,20</td>
  </tr>
  <tr>
    <td>Zahnreinigunstabs</td>
    <td><input id="ZahnreinigunstabsAmount"></td>
    <td>3,20</td>
  </tr>
  <tr>
    <td>Rasierklingen</td>
    <td><input id="RasierklingenAmount"></td>
    <td>2,49</td>
  </tr>
  <tr>
    <td>Rasierer mit Klingen</td>
    <td><input id="RasiererMitKlingenAmount"></td>
    <td>4.50</td>
  </tr>
  <tr>
    <td>Rasierschaum</td>
    <td><input id="RasierschaumAmount"></td>
    <td>1,40</td>
  </tr>
  <tr>
    <td>Einwegrasierer</td>
    <td><input id="EinwegrasiererAmount"></td>
    <td>2</td>
  </tr>
  <tr>
    <td>Zahnreinigunsbecher</td>
    <td><input id="ZahnreinigunsBecherAmount"></td>
    <td>5</td>
  </tr>
  <tr>
    <td>Mullkompressen</td>
    <td><input id="MullkompressenAmount"></td>
    <td>6</td>
  </tr>
  <tr>
    <td><b>Gesamtpreis</b></td>
    <td><b id="Sum"></b></td>
  </tr>
</table>
<div class="buttons">
  <button id="Rechnen" onclick="Calculate()">Rechnen</button>
  <button id="Clear All" onclick="ClearAll()">Clear All</button>
</div>
    Login or Signup to reply.
  3. 0

    Add an EventListener to the keypress event and call the `Calculate’ function when the key is enter.

    To read more about EventListeners in JS: W3 School about EventListener

    Here is an example solution:

    document.onkeypress = (e) => {
   e = e || window.event

   if(e.key === 'Enter'){
    Calculate()
   }
}
    Login or Signup to reply.
  4. 0

    You are doing one mistake. You are binding the keypress event with submit button. You should bind it with the document. And secondly just need to move that code outside of calculate function. It will work fine. Here is the updated code.

    var Waschlotion = 1.30;
var Haarshampoo = 1.50;
var Bodylotion = 3;
var Wundschutzcreme = 4.80;
var Deospray = 1.80;
var Zahncreme = 1.50;
var Zahnbuerste = 1;
var Zahnspuellbecher = 1.25;
var Zahnhaftcreme = 3.20;
var Zahnreinigunstabs = 3.20;
var Rasierklingen = 2.49;
var RasiererMitKlingen = 4.50;
var Rasierschaum = 1.40;
var Einwegrasierer = 2;
var ZahnreinigunsBecher = 5;
var Mullkompressen = 6;

let Sum;

let WaschlotionAmount;
let HaarshampooAmount;
let BodylotionAmount;
let WundschutzcremeAmount;
let DeosprayAmount;
let ZahncremeAmount;
let ZahnbuersteAmount;
let ZahnspuellbecherAmount;
let ZahnhaftcremeAmount;
let ZahnreinigunstabsAmount;
let RasierklingenAmount;
let RasiererMitKlingenAmount;
let RasierschaumAmount;
let EinwegrasiererAmount;
let ZahnreinigunsBecherAmount;
let MullkompressenAmount;

function Calculate() {
  if (Sum != 0) {
    Sum = 0;
  }
  let WaschlotionAmount = document.getElementById("WaschlotionAmount").value;
  let HaarshampooAmount = document.getElementById("HaarshampooAmount").value;
  let BodylotionAmount = document.getElementById("BodylotionAmount").value;
  let WundschutzcremeAmount = document.getElementById("WundschutzcremeAmount").value;
  let DeosprayAmount = document.getElementById("DeosprayAmount").value;
  let ZahncremeAmount = document.getElementById("ZahncremeAmount").value;
  let ZahnbuersteAmount = document.getElementById("ZahnbuersteAmount").value;
  let ZahnspuellbecherAmount = document.getElementById("ZahnspuellbecherAmount").value;
  let ZahnhaftcremeAmount = document.getElementById("ZahnhaftcremeAmount").value;
  let ZahnreinigunstabsAmount = document.getElementById("ZahnreinigunstabsAmount").value;
  let RasierklingenAmount = document.getElementById("RasierklingenAmount").value;
  let RasiererMitKlingenAmount = document.getElementById("RasiererMitKlingenAmount").value;
  let RasierschaumAmount = document.getElementById("RasierschaumAmount").value;
  let EinwegrasiererAmount = document.getElementById("EinwegrasiererAmount").value;
  let ZahnreinigunsBecherAmount = document.getElementById("ZahnreinigunsBecherAmount").value;
  let MullkompressenAmount = document.getElementById("MullkompressenAmount").value;

  Sum = (Waschlotion * WaschlotionAmount) + (Haarshampoo * HaarshampooAmount) + (Bodylotion * BodylotionAmount) +
    (Wundschutzcreme * WundschutzcremeAmount) + (Deospray * DeosprayAmount) + (Zahncreme * ZahncremeAmount) +
    (Zahnbuerste * ZahnbuersteAmount) + (Zahnspuellbecher * ZahnspuellbecherAmount) + (Zahnhaftcreme * ZahnhaftcremeAmount) +
    (Zahnreinigunstabs * ZahnreinigunstabsAmount) + (Rasierklingen * RasierklingenAmount) + (RasiererMitKlingen * RasiererMitKlingenAmount) +
    (Rasierschaum * RasierschaumAmount) + (Einwegrasierer * EinwegrasiererAmount) + (ZahnreinigunsBecher * ZahnreinigunsBecherAmount) + (Mullkompressen * MullkompressenAmount);


  var roundedString = Sum.toFixed(2);
  var rounded = Number(roundedString);
  document.getElementById("Sum").innerHTML = rounded;
}

  document.addEventListener("keypress",
    function(event) {

      if (event.key === "Enter") {
        Calculate();
      }
    });


function ClearAll() {
  document.getElementById("WaschlotionAmount").value = "";
  document.getElementById("HaarshampooAmount").value = "";
  document.getElementById("BodylotionAmount").value = "";
  document.getElementById("WundschutzcremeAmount").value = "";
  document.getElementById("DeosprayAmount").value = "";
  document.getElementById("ZahncremeAmount").value = "";
  document.getElementById("ZahnbuersteAmount").value = "";
  document.getElementById("ZahnspuellbecherAmount").value = "";
  document.getElementById("ZahnhaftcremeAmount").value = "";
  document.getElementById("ZahnreinigunstabsAmount").value = "";
  document.getElementById("RasierklingenAmount").value = "";
  document.getElementById("RasiererMitKlingenAmount").value = "";
  document.getElementById("RasierschaumAmount").value = "";
  document.getElementById("EinwegrasiererAmount").value = "";
  document.getElementById("MullkompressenAmount").value = "";
  document.getElementById("ZahnreinigunsBecherAmount").value = "";
}
    td {
  text-align: center;
  font-weight: bold;
}

table {
  text-align: center;
}

.center {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.buttons {
  margin-top: 20px;
  margin-left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

button {
  cursor: pointer;
}

#Rechnen {
  margin-right: 10px;
}
    <table class="center">
  <tr>
    <th>Kosmetikartikel</th>
    <th>Menge</th>
  </tr>
  <tr>
    <td>Waschlotion</td>
    <td><input id="WaschlotionAmount"></td>
    <td> 1,30 </td>
  </tr>
  <tr>
    <td>Haarshampoo</td>
    <td><input id="HaarshampooAmount"></td>
    <td>1,50</td>
  </tr>
  <tr>
    <td>Bodylotion</td>
    <td><input id="BodylotionAmount"></td>
    <td>3</td>
  </tr>
  <tr>
    <td>Wundschutzcreme</td>
    <td><input id="WundschutzcremeAmount"></td>
    <td>4,80</td>
  </tr>
  <tr>
    <td>Deospray</td>
    <td><input id="DeosprayAmount"></td>
    <td>1,80</td>
  </tr>
  <tr>
    <td>Zahncreme</td>
    <td><input id="ZahncremeAmount"></td>
    <td>1,50</td>
  </tr>
  <tr>
    <td>Zahnbürste</td>
    <td><input id="ZahnbuersteAmount"></td>
    <td>1</td>
  </tr>
  <tr>
    <td>Zahnspüllbecher</td>
    <td><input id="ZahnspuellbecherAmount"></td>
    <td>1,25</td>
  </tr>
  <tr>
    <td>Zahnhaftcreme</td>
    <td><input id="ZahnhaftcremeAmount"></td>
    <td>3,20</td>
  </tr>
  <tr>
    <td>Zahnreinigunstabs</td>
    <td><input id="ZahnreinigunstabsAmount"></td>
    <td>3,20</td>
  </tr>
  <tr>
    <td>Rasierklingen</td>
    <td><input id="RasierklingenAmount"></td>
    <td>2,49</td>
  </tr>
  <tr>
    <td>Rasierer mit Klingen</td>
    <td><input id="RasiererMitKlingenAmount"></td>
    <td>4.50</td>
  </tr>
  <tr>
    <td>Rasierschaum</td>
    <td><input id="RasierschaumAmount"></td>
    <td>1,40</td>
  </tr>
  <tr>
    <td>Einwegrasierer</td>
    <td><input id="EinwegrasiererAmount"></td>
    <td>2</td>
  </tr>
  <tr>
    <td>Zahnreinigunsbecher</td>
    <td><input id="ZahnreinigunsBecherAmount"></td>
    <td>5</td>
  </tr>
  <tr>
    <td>Mullkompressen</td>
    <td><input id="MullkompressenAmount"></td>
    <td>6</td>
  </tr>
  <tr>
    <td><b>Gesamtpreis</b></td>
    <td><b id="Sum"></b></td>
  </tr>
</table>
<div class="buttons">
  <button id="Rechnen" onclick="Calculate()">Rechnen</button>
  <button id="Clear All" onclick="ClearAll()">Clear All</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search