jQuery Eingabe unten einfügen?
Ich soll einen Code schreiben, der die Eingabe nach dem drücken des Buttons unten auflistet (wie im Bild gezeigt). Kann mir jemand sagen was ich falsch gemacht habe?
Hier mein Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Praktikum Webanwendungen 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<style>
h1{
font-size: 50px;
}
div{
float: left;
margin: 10px;
}
.aufgabe{
font-weight: bold;
font-size: larger;
}
.liste{
border: solid black;
}
</style>
<body>
<h1>Todo Liste</h1>
<div class="aufgabe">Aufgabe:</div>
<div class="eingabe"> <input type="text"> </div>
<div class="erstellen"> <input type="submit" value="Erstellen"> </div>
<br><br>
<p class="liste"></p>
</body>
<script>
$(document).ready(function(){
$(".erstellen").click(function(){
$("input").appendTo(".liste");
});
});
</script>
</body>
</html>
1 Antwort
1) Der style-Tag gehört in den head.
2) Du schließt den body viel zu früh. Der erste schließende body-Tag muss raus.
3) Aktuell hängst du das Eingabefeld selbst in dein Element mit der Klasse liste. Du sollst aber den Text aus dem Eingabefeld in ein p-Element einfügen und dieses anhängen.
const text = $(".eingabe > input").val();
$(`<p>${text}</p>`).appendTo(".liste");
Beachte in diesem Zug, dass Paragraphen nicht geschachtelt werden können. Ändere dein Element mit der Klasse liste in ein div o.ä..
Vielen Dank! Wie der schließende body tag da rein kommt kann ich mir selbst nicht erklären und dass der style tag in den head muss weiß ich eigentlich auch lol
Entschuldige, ich sitze einfach schon zu lange an der Aufgabe, mein Kopf funktioniert nicht mehr so wie er soll.
Ich habe alles versucht und verstehe immer noch nicht warum es nicht funktioniert, ich bin am verzweifeln.
Was mache ich falsch?
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Praktikum Webanwendungen 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
const text = $(".eingabe > input").val();
$('<p>${text}</p>').appendTo(".liste");
</script>
</head>
<style>
h1{
font-size: 50px;
}
div{
float: left;
margin: 10px;
}
.aufgabe{
font-weight: bold;
font-size: larger;
}
</style>
<body>
<h1>Todo Liste</h1>
<div class="aufgabe">Aufgabe:</div>
<div class="eingabe"> <input type="text"> </div>
<div class="erstellen"> <input type="submit" value="Erstellen"> </div>
<br><br>
<div class="liste"></div>
</body>
</html>
Zum einen ist der style-Tag noch immer außerhalb des head und zum anderen hast du aus unerklärlichen Gründen den click-Handler entfernt.
Überlege erst, was du tun willst, denn Trial-and-error-Games sind nicht zielführend. Wenn es dir hilft, dann formuliere den Ablauf erst in Stichpunkten oder erstell dir ein Struktogramm. Erst danach schreibst du den Code.
Dankeschön für deine Geduld, du hast mir wirklich wahnsinnig geholfen!
Ich habe gerade nochmal gelesen, dass der Inhalt als ein neues <p> Element angehängt werden soll. wie bekomme ich das hin?