Shared conversation
Assistant ·
erstelle mir ein html, js in welchem ich 10 formularfelder addieren kann
Assistant
Natürlich! Hier ist ein Beispiel für HTML und JavaScript-Code, mit dem du 10 Formularfelder addieren kannst:
<!DOCTYPE html>
<html>
<head>
<title>Formularfelder Addition</title>
<script>
function addiere() {
var summe = 0;
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'number') {
summe += parseFloat(input.value);
}
}
document.getElementById('ergebnis').innerHTML = 'Die Summe beträgt: ' + summe;
}
</script>
</head>
<body>
<h1>Formularfelder Addition</h1>
<form>
<label for="feld1">Feld 1:</label>
<input type="number" id="feld1" name="feld1"><br>
<label for="feld2">Feld 2:</label>
<input type="number" id="feld2" name="feld2"><br>
<label for="feld3">Feld 3:</label>
<input type="number" id="feld3" name="feld3"><br>
<label for="feld4">Feld 4:</label>
<input type="number" id="feld4" name="feld4"><br>
<label for="feld5">Feld 5:</label>
<input type="number" id="feld5" name="feld5"><br>
<label for="feld6">Feld 6:</label>
<input type="number" id="feld6" name="feld6"><br>
<label for="feld7">Feld 7:</label>
<input type="number" id="feld7" name="feld7"><br>
<label for="feld8">Feld 8:</label>
<input type="number" id="feld8" name="feld8"><br>
<label for="feld9">Feld 9:</label>
<input type="number" id="feld9" name="feld9"><br>
<label for="feld10">Feld 10:</label>
<input type="number" id="feld10" name="feld10"><br>
<button type="button" onclick="addiere()">Addieren</button>
</form>
<p id="ergebnis"></p>
</body>
</html>
In diesem Beispiel werden 10 Formularfelder mit dem Typ "number" erstellt. Wenn du auf den "Addieren"-Button klickst, werden die Werte der Felder addiert und das Ergebnis wird in einem <p>-Element mit der ID "ergebnis" angezeigt.
Hinweis: Dieses Beispiel geht davon aus, dass du die HTML-Datei lokal in deinem Webbrowser öffnest.
standard soll die 0 bereits eingetragen sein
Assistant
Natürlich! Hier ist der aktualisierte HTML-Code, in dem die Standardwerte der Formularfelder auf 0 gesetzt sind:
<!DOCTYPE html>
<html>
<head>
<title>Formularfelder Addition</title>
<script>
function addiere() {
var summe = 0;
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'number') {
summe += parseFloat(input.value);
}
}
document.getElementById('ergebnis').innerHTML = 'Die Summe beträgt: ' + summe;
}
</script>
</head>
<body>
<h1>Formularfelder Addition</h1>
<form>
<label for="feld1">Feld 1:</label>
<input type="number" id="feld1" name="feld1" value="0"><br>
<label for="feld2">Feld 2:</label>
<input type="number" id="feld2" name="feld2" value="0"><br>
<label for="feld3">Feld 3:</label>
<input type="number" id="feld3" name="feld3" value="0"><br>
<label for="feld4">Feld 4:</label>
<input type="number" id="feld4" name="feld4" value="0"><br>
<label for="feld5">Feld 5:</label>
<input type="number" id="feld5" name="feld5" value="0"><br>
<label for="feld6">Feld 6:</label>
<input type="number" id="feld6" name="feld6" value="0"><br>
<label for="feld7">Feld 7:</label>
<input type="number" id="feld7" name="feld7" value="0"><br>
<label for="feld8">Feld 8:</label>
<input type="number" id="feld8" name="feld8" value="0"><br>
<label for="feld9">Feld 9:</label>
<input type="number" id="feld9" name="feld9" value="0"><br>
<label for="feld10">Feld 10:</label>
<input type="number" id="feld10" name="feld10" value="0"><br>
<button type="button" onclick="addiere()">Addieren</button>
</form>
<p id="ergebnis"></p>
</body>
</html>
In diesem aktualisierten Beispiel sind die Standardwerte der Formularfelder auf 0 gesetzt, indem das value-Attribut für jedes Feld auf "0" festgelegt wird. Wenn du die Seite lädst oder den "Addieren"-Button klickst, wird die Summe automatisch als 0 angezeigt, wenn keine Werte in den Feldern eingegeben wurden.
per css alles zentriert und blauer hintergrund
Assistant
Natürlich! Hier ist der aktualisierte HTML-Code, der CSS verwendet, um alles zentriert anzuzeigen und einen blauen Hintergrund zu haben:
<!DOCTYPE html>
<html>
<head>
<title>Formularfelder Addition</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: blue;
color: white;
font-family: Arial, sans-serif;
}
form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
label {
margin-bottom: 10px;
}
input[type="number"] {
width: 100px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
}
#ergebnis {
font-weight: bold;
}
</style>
<script>
function addiere() {
var summe = 0;
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'number') {
summe += parseFloat(input.value);
}
}
document.getElementById('ergebnis').innerHTML = 'Die Summe beträgt: ' + summe;
}
</script>
</head>
<body>
<h1>Formularfelder Addition</h1>
<form>
<label for="feld1">Feld 1:</label>
<input type="number" id="feld1" name="feld1" value="0">
<label for="feld2">Feld 2:</label>
<input type="number" id="feld2" name="feld2" value="0">
<label for="feld3">Feld 3:</label>
<input type="number" id="feld3" name="feld3" value="0">
<label for="feld4">Feld 4:</label>
<input type="number" id="feld4" name="feld4" value="0">
<label for="feld5">Feld 5:</label>
<input type="number" id="feld5" name="feld5" value="0">
<label for="feld6">Feld 6:</label>
<input type="number" id="feld6" name="feld6" value="0">
<label for="feld7">Feld 7:</label>
<input type="number" id="feld7" name="feld7" value="0">
<label for="feld8">Feld 8:</label>
<input type="number" id="feld8" name="feld8" value="0">
<label for="feld9">Feld 9:</label>
<input type="number" id="feld9" name="feld9" value="0">
<label for="feld10">Feld 10:</label>
<input type="number" id="feld10" name="feld10" value="0">
<button type="button" onclick="addiere()">Addieren</button>
</form>
<p id="ergebnis"></p>
</body>
</html>
In diesem aktualisierten Beispiel wird CSS verwendet, um die Seite zu zentrieren und einen blauen Hintergrund zu haben. Das body-Element hat display: flex und verwendet align-items: center und justify-content: center, um den Inhalt zentriert anzuzeigen. Der Hintergrund ist blau (background-color: blue;) und der Text ist weiß (color: white;). Weitere CSS-Stile wurden hinzugefügt, um das Aussehen der Elemente anzupassen, einschließlich der Formularfelder und des Ergebnisbereichs.
stadt blauem hintergrund möchte ich ein jpg Bild in den Hintergund legen. Vollbild
Assistant
Um ein JPG-Bild als Hintergrundbild einzufügen und es über den gesamten Bildschirm auszudehnen, kannst du das CSS background-image und background-size verwenden. Hier ist der aktualisierte HTML-Code, um ein JPG-Bild als Hintergrundbild einzufügen:
<!DOCTYPE html>
<html>
<head>
<title>Formularfelder Addition</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-image: url('dein-bild.jpg');
background-size: cover;
color: white;
font-family: Arial, sans-serif;
}
form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
label {
margin-bottom: 10px;
}
input[type="number"] {
width: 100px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
}
#ergebnis {
font-weight: bold;
}
</style>
<script>
function addiere() {
var summe = 0;
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'number') {
summe += parseFloat(input.value);
}
}
document.getElementById('ergebnis').innerHTML = 'Die Summe beträgt: ' + summe;
}
</script>
</head>
<body>
<h1>Formularfelder Addition</h1>
<form>
<label for="feld1">Feld 1:</label>
<input type="number" id="feld1" name="feld1" value="0">
<label for="feld2">Feld 2:</label>
<input type="number" id="feld2" name="feld2" value="0">
<label for="feld3">Feld 3:</label>
<input type="number" id="feld3" name="feld3" value="0">
<label for="feld4">Feld 4:</label>
<input type="number" id="feld4" name="feld4" value="0">
<label for="feld5">Feld 5:</label>
<input type="number" id="feld5" name="feld5" value="0">
<label for="feld6">Feld 6:</label>
<input type="number" id="feld6" name="feld6" value="0">
<label for="feld7">Feld 7:</label>
<input type="number" id="feld7" name="feld7" value="0">
<label for="feld8">Feld 8:</label>
<input type="number" id="feld8" name="feld8" value="0">
<label for="feld9">Feld 9:</label>
<input type="number" id="feld9" name="feld9" value="0">
<label for="feld10">Feld 10:</label>
<input type="number" id="feld10" name="feld10" value="0">
<button type="button" onclick="addiere()">Addieren</button>
</form>
<p id="ergebnis"></p>
</body>
</html>
Stelle sicher, dass du den Dateinamen deines eigenen JPG-Bildes an die entsprechende Stelle (url('dein-bild.jpg')) im CSS-Code einfügst. Das Bild wird dann als Hintergrundbild verwendet und mit background-size: cover über den gesamten Bildschirm ausgedehnt.
kann man noch die Ausgabe der Summe hervorheben?
Assistant
Ja, du kannst die Ausgabe der Summe hervorheben, indem du dem entsprechenden Element zusätzliche CSS-Stile hinzufügst. Hier ist der aktualisierte CSS-Code, um die Ausgabe der Summe hervorzuheben:
<style>
/* ... vorhandener CSS-Code ... */
#ergebnis {
font-weight: bold;
font-size: 24px;
margin-top: 20px;
text-align: center;
background-color: yellow;
padding: 10px;
border-radius: 5px;
}
</style>
In diesem Beispiel wurden dem #ergebnis-Element verschiedene CSS-Stile hinzugefügt, um es hervorzuheben. Der Text wird fett angezeigt (font-weight: bold;), die Schriftgröße wurde auf 24 Pixel erhöht (font-size: 24px;), es gibt einen oberen Rand von 20 Pixeln (margin-top: 20px;), der Text wird zentriert angezeigt (text-align: center;), der Hintergrund ist gelb (background-color: yellow;), es gibt einen Innenabstand von 10 Pixeln (padding: 10px;) und die Ecken haben einen Radius von 5 Pixeln (border-radius: 5px;).
Durch diese zusätzlichen CSS-Stile wird die Ausgabe der Summe hervorgehoben und besser sichtbar gemacht. Du kannst die Werte dieser Stile nach Bedarf anpassen.
This conversation may have been edited by the sharer.