Rechnen mit JS

02.07.2018 05:31 Uhr

Puppy of the Week:

puppy

  • CC0 Public Domain

THE WORLD’S LARGEST WEB DEVELOPER SITE

W3Schools

Ebenfalls sehr hilfreich: SelfHtml


Was haben wir gelernt?

JavaScript Arithmetic Operators

JavaScript Output

Using document.write(),

Using innerHTML,

JavaScript HTML DOM Elements

Finding HTML Element by Id

HTML JavaScript

<head>

<title>Pizzabestellung</title>

<meta charset="utf-8">

<script type="text/javascript">

function schreiben() {

var helo = document.getElementById("firstname").value;

var helo1 = document.getElementById("lastname").value;

document.getElementById("hello").innerHTML = helo +helo1;

}

function rechnen() {

var anz = document.getElementById("anzahl").value;

var kost = document.getElementById("kosten").value;

var erg = anz * kost;

document.getElementById("gesamt").innerHTML = erg;

}

function lesenRechnenSchreiben() {

var hello = document.getElementById("hello1").firstChild;

alert("Eine Pizza kostet: " +hello.nodeValue +" Euro.");

var anz = document.getElementById("anzahl").value;

var kost = document.getElementById("kosten").value;

var erg = anz * kost;

document.getElementById("gesamt").innerHTML = erg;

}

</script>

</head>

<body>

<h1>Hier können Sie Pizza bestellen!</h1>

<p> Guten Tag Frau/Herr <span id="hello"> </span> !</p>

<p> Eine Pizza kostet <span id="hello1"> 7</span> Euro.</p>

<p> Sie müssen insgesamt <span id="gesamt"> </span> Euro bezahlen.</p>

<form action="">

<fieldset>

<legend>Wer bestellt wieviel?</legend>

<label for="firstname">Vorname:</label>

<input type="text" id="firstname" name="firstname" >

<label for="lastname">Nachname:</label>

<input type="text" id="lastname" name="lastname"><br>

<label for="anzahl">Anzahl:</label>

<input type="text" id="anzahl" name="anzahl"><br>

<label for="kosten">Kosten in €:</label>

<input type="text" id="kosten" value="7" fixed><br>

</fieldset><br><br>

<input type="reset">

<input type="submit" value="absenden">

</form>

<p> Dies ist ein Beispiel für das Auslesen von numerischen Werten aus einem input Element und anschließendem Einfügen in einen Text:

<button type="button" onclick="rechnen()">Gesamtbetrag berechnen</button>

</p>

<p> Dies ist ein Beispiel für das Auslesen von Text aus zwei input Elementen und anschließendem Einfügen in einen Text:

<button type="button" onclick="schreiben()">Mit Namen begrüßen</button>

</p>

<p> Dies ist ein Beispiel für das Auslesen von einem numerischen Wert aus einem Text mit span Elementen und anschließender Ausgabe in einen Popup Fenster, sowie der Nutzung für die Berechnung und anschließendem Einfügen in einen Text :

<button type="button" onclick="lesenRechnenSchreiben()">Lesen Rechnen Schreiben</button>

</p>

</body>