Login

nbergmann · 08.01.2023, 11:42

Code:
<!DOCTYPE html><html lang="de">

<head>

   <meta charset="utf-8">

   <title>Aufg 5: Plus Minus</title>

   <link rel="stylesheet" href="js4.css">

   <script>

     function rechnen()

      {

         let tx;

         if(r1.checked) tx = r1.value;

         else if(r2.checked) tx = r2.value;

         else if(r3.checked) tx = r3.value;

         else if(r4.checked) tx = r4.value;

         let zahl1, zahl2;

         if(eingabe1.value == "" || isNaN(eingabe1.value))

            zahl1 = 0;

         else

            zahl1 = parseFloat(eingabe1.value);

         if(eingabe2.value == "" || isNaN(eingabe2.value))

            zahl2 = 0;

         else

            zahl2 = parseFloat(eingabe2.value);

         if (tx == "Addition") ausgabe.value = zahl1 + zahl2;

           else if (tx == "Subtraktion") ausgabe.value = zahl1 - zahl2;

           else if (tx == "Multiplikation") ausgabe.value = zahl1 * zahl2;

           else if (tx == "Division") ausgabe.value = zahl1 / zahl2;

    // Werden die folgenden zwei Zeilen aktiviert, kommt es zu einem unerwünschten Seitenwechsel. 

    //      if (ausgabe.value >= 0) document.write("Das Ergebnis ist positiv.")

    //        else document.write("Das Ergebnis ist negativ.");         

      }

    </script>

</head>

<body>

   <form>  

      <p><input id="idAddition" name="operation" type="radio"

            value="Addition" checked="checked">Plus

      <input id="idSubtraktion" name="operation" type="radio"

            value="Subtraktion">Minus

      <input id="idMultiplikation" name="operation" type="radio"

            value="Multiplikation">Mal

      <input id="idDivision" name="operation" type="radio"

            value="Division">Geteilt</p>

      <p><input id="idEingabe1"> Erste Zahl</p>

      <p><input id="idEingabe2"> Zweite Zahl</p>

      <p><input id="idRechnen" type="button" value="Rechnen"></p>

      <p><input id="idAusgabe" disabled> Ausgabe</p>   

   </form>

   <script>

      const r1 = document.getElementById("idAddition");

      const r2 = document.getElementById("idSubtraktion");

      const r3 = document.getElementById("idMultiplikation");

      const r4 = document.getElementById("idDivision");

      const eingabe1 = document.getElementById("idEingabe1");

      const eingabe2 = document.getElementById("idEingabe2");

      const ausgabe  = document.getElementById("idAusgabe");

      const re = document.getElementById("idRechnen");

      re.addEventListener("click", rechnen); 

   </script>

</body>

</html>

Wenn ich in der function rechnen() die letzten beiden Zeilen aktiviere, zeigt der mir zwar einen richtigen Satz an, allerdings erst nach einem unerwünschten Seitenwechsel.
Wie platziere ich diesen Satz auf Seite 1 unter dem Rechenergebnis?

***admin*** · (Dieser Beitrag wurde zuletzt bearbeitet: 10.01.2023, 05:43 von admin.)

Du nutzt auch document.write , das nimmt man eigentlich nicht mehr.
Versuche es mal so

nbergmann · 08.01.2023, 18:06

Hallo admin!

Ich danke dir für deine Lösung. Auch nachdem ich sie in die meinige Struktur umgeändert habe, funktioniert sie tadellos.
In meinem Lehrbuch wird "innerHTML" erst auf Seite 189 erklärt. Ich bin aber erste auf Seite 178...

Was ich noch nicht verstehe:
Warum wird der Antwortsatz über dem Ausgabefeld für das Ergebnis platziert?
Wie könnte ich ihn darunter platzieren?

Glück auf
Norbert
---

***rzscout*** · 08.01.2023, 18:42

Hallo nbergmann, ich habe auch eine Version gebastelt. Hier meine Version:

Code:
<!DOCTYPE html>

<html lang="de">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Rechnen</title>

    <style>

        html {

            font-family: 'Arial', 'Helvetica', sans-serif;

        }

        fieldset {

            display: inline-block;

            width: 600px;

        }

        body {

            display: flex;

            flex-direction: column;

            align-items: center;

        }

        .ausgabe-set {

            display: flex;

            flex-direction: column;

        }

    </style>

    <script>

        var r1, r2, r3, r4, rgesamt, zahl1, zahl2, output, btn, rechenart;

        document.addEventListener('DOMContentLoaded', function() {

            r1 = document.getElementById('r1'); r2 = document.getElementById('r2');

            r3 = document.getElementById('r3'); r4 = document.getElementById('r4');

            rgesamt = document.querySelectorAll('input[name=rechenart]');

            rgesamt.forEach(function(elem){

                elem.addEventListener('input', function() {

                    rechenart = elem.dataset.rechenart;

                });

            });

            zahl1 = document.getElementById('zahl1'); zahl2 = document.getElementById('zahl2');

            zahl1.value = ''; zahl2.value = ''; zahl1.focus();

            output = document.getElementById('output'); btn = document.getElementById('btn');

            r1.checked = true; rechenart = 'addition';

            btn.addEventListener('click', function() {

                let num1 = zahl1.value.replace(',','.');

                let num2 = zahl2.value.replace(',','.');

                if(!isNaN(num1) && !isNaN(num2) && num1 != '' && num2 != '') {

                    num1 = parseFloat(num1);

                    num2 = parseFloat(num2);

                    berechne(num1, num2);

                } else {                    

                    output.value = "Fehler: Bitte richtige Zahlen eingeben!";                                        

                }                

            });

        });

        function berechne(num1, num2) {

            var ergebnis = 0;

            switch(rechenart) {

                case 'addition':

                    ergebnis = num1 + num2;

                    output.value = ergebnis;

                break;

                case 'subtraktion':

                    ergebnis = num1 - num2;

                    output.value = ergebnis;

                break;

                case 'multiplikation':

                    ergebnis = num1 * num2;

                    output.value = ergebnis;

                break;

                case 'division':

                    ergebnis = num1 / num2;

                    output.value = ergebnis;

                break;

            }

        }

    </script>

</head>

<body>

    <h1>Rechner</h1>

    <fieldset>

        <input type="radio" name="rechenart" id="r1" data-rechenart="addition">

        <label for="r1">Addition</label>

        <input type="radio" name="rechenart" id="r2" data-rechenart="subtraktion">

        <label for="r2">Subtraktion</label>

        <input type="radio" name="rechenart" id="r3" data-rechenart="multiplikation">

        <label for="r3">Multiplikation</label>

        <input type="radio" name="rechenart" id="r4" data-rechenart="division">

        <label for="r4">Division</label>

    </fieldset>

    <fieldset>

        <input type="number" name="zahl1" id="zahl1">

        <label for="zahl1">Erste Zahl</label>

        <input type="number" name="zahl2" id="zahl2">

        <label for="zahl2">Zweite Zahl</label>

    </fieldset>

    <fieldset class="ausgabe-set">

        <p>Ergebnis:</p><output id="output"></output>

        <button id="btn">berechne</button>

    </fieldset>

</body>

</html>

Ich hoffe der erstellte Codeschnipsel und der von admin können dir weiterhelfen deinen Code besser zu verstehen.

Viele Grüße
rzscout

***admin*** · 08.01.2023, 21:01

(08.01.2023, 18:06)nbergmann schrieb: Was ich noch nicht verstehe:
Warum wird der Antwortsatz über dem Ausgabefeld für das Ergebnis platziert?
Wie könnte ich ihn darunter platzieren?

Weil ich den Code eingebaut habe

Code:
var inf = document.getElementById("info");

      if (ausgabe.value >= 0) {

        inf.innerHTML = "Das Ergebnis ist positiv.";

      } else {

        inf.innerHTML = "Das Ergebnis ist negativ.";

      }

Der schreibt mit innerHTML das Ergebnis in das Element mit der id info.
Das Element

Code:
<p id="info"></p>

Steht in meinem Beispiel über das Ausgabefeld.

Kurz gesagt , kopiere den HTML-Code nach dem Ausgabefeld

nbergmann · 09.01.2023, 10:51

Danke für die Info.

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken