Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Unerwünschter neuer Seitenaufbau
#1
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?
Zitieren
#2
Du nutzt auch document.write , das nimmt man eigentlich nicht mehr.
Versuche es mal so
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren
#3
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
---
Zitieren
#4
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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren
#5
(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
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Zitieren
#6
Danke für die Info.
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
2 Gast/Gäste