javascript 尝试将enter键绑定到按钮上

bogh5gae  于 2023-05-12  发布在  Java
关注(0)|答案(4)|浏览(147)

我做了一个化妆品计算器，它的功能很好，但我想添加一个功能，当我按回车键时，它会运行计算。现在在程序中我必须手动点击“rechnen”按钮来计算。有什么想法，我可以做什么，而不是总是用鼠标来计算？
我试过使用W3schools的一个例子，并将代码实现到我的代码中，但它似乎不起作用。

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>
JavaScript

4条答案

按热度按时间
ws51t4hk

ws51t4hk1#

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>
赞(0）分享  回复(0）举报  2023-05-12
nwsw7zdq

nwsw7zdq2#

你犯了一个错误。您正在将按键事件与提交按钮绑定。您需要与文件绑定。第二，只需要将该代码移出计算函数。它会工作得很好。下面是更新后的代码。

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>
赞(0）分享  回复(0）举报  2023-05-12
iq0todco

iq0todco3#

在按键事件中添加一个EventListener，在回车键时调用`Calculate'函数。
阅读更多关于JS中EventListeners的信息：W3 School about EventListener
以下是一个示例解决方案：

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

   if(e.key === 'Enter'){
    Calculate()
   }
}
赞(0）分享  回复(0）举报  2023-05-12
lmvvr0a8

lmvvr0a84#

我会简化这一点，并使用一个提交事件的表单。提交将计算，因此将输入任何东西。
我添加了一个重置，并将数量字段更改为type=“number”
我在用

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>
赞(0）分享  回复(0）举报  2023-05-12
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com