+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Unerwünschter neuer Seitenaufbau (/showthread.php?tid=2011)
Unerwünschter neuer Seitenaufbau - nbergmann - 08.01.2023
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>Wie platziere ich diesen Satz auf Seite 1 unter dem Rechenergebnis?
RE: Unerwünschter neuer Seitenaufbau - admin - 08.01.2023
Du nutzt auch document.write , das nimmt man eigentlich nicht mehr.
Versuche es mal so
RE: Unerwünschter neuer Seitenaufbau - nbergmann - 08.01.2023
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
---
RE: Unerwünschter neuer Seitenaufbau - rzscout - 08.01.2023
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
RE: Unerwünschter neuer Seitenaufbau - admin - 08.01.2023
(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>Kurz gesagt , kopiere den HTML-Code nach dem Ausgabefeld
RE: Unerwünschter neuer Seitenaufbau - nbergmann - 09.01.2023
Danke für die Info.