html.de - window.onload als button

by SpiceLab

HTML

<h1>Web-Rechnen</h1>
<main>
  <form>
      <label for="zahl1">Zahl1:
          <input id="zahl1" type="number"  value="100">
      </label>
      <label for="zahl2">Zahl2:
          <input id="zahl2" type="number"  value="75">
      </label>
      <label>Summe:
          <output id="summe"></output>
          <br>
          Produkt:
          <output id="produkt"></output>
      </label>
      <button type="button" id="berechnen">Summe berechnen</button>
      <button type="button" id="berechnen_produkt">Produkt berechnen</button>
  </form>
</main>

CSS

label, button {
  display: block;
  margin: 2em;
}
input {
  width: 3.5em;
}

JavaScript

function berechne_Summe () {
    var zahl1 = parseInt(document.getElementById("zahl1").value);
    var zahl2 = parseInt(document.getElementById("zahl2").value);

    var summe = zahl1 + zahl2;

    document.getElementById("summe").value = summe;
}

function berechne_Produkt () {
    var zahl1 = parseInt(document.getElementById("zahl1").value);
    var zahl2 = parseInt(document.getElementById("zahl2").value);

    var produkt = zahl1 * zahl2;

    document.getElementById("produkt").value = produkt;
}

window.onload = function () {
    document.getElementById("berechnen").onclick = berechne_Summe;
    document.getElementById("berechnen_produkt").onclick = berechne_Produkt;
};