Problem mit Einkaufsliste in HTML5

Diskutiere Problem mit Einkaufsliste in HTML5 im HTML Forum im Bereich Programmierung; Hallo, mein Plan war es als mein erstes Projekt in HTML eine Einkaufsliste zu Programmieren, zu der man Sachen hinzufügen und Abhaken kann. Jedoch...
H

Halbmondcode

New member
Beiträge
1
Punkte Reaktionen
0
Hallo,
mein Plan war es als mein erstes Projekt in HTML eine Einkaufsliste zu Programmieren, zu der man Sachen hinzufügen und Abhaken kann. Jedoch erscheint, wenn ich auf den Hinzufügen Knopf drücke, ein neuer Listeneintrag entweder nur ganz kurz, oder gar nicht.
ich würde mich sehr freuen, wenn mir jemand da weiterhelfen könnte. Ich habe in VS Code gecodet und Komponenten von Material Design Lite verwendet.


Hier mein Code bisher:


<!DOCTYPE html>
<html lang="en">

<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>Document</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<style>
.page-content {
padding: 50px 100px;
}

.demo-list-control {
width: 300px;
}
</style>
<script>
function addProdukt() {

liste.innerHTML = `
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
Bryan Cranston
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="list-checkbox-1">
<input type="checkbox" id="list-checkbox-1" class="mdl-checkbox__input" />
</label>
</span>
</li>

`;
textfeld1.value = ""

}
</script>
</head>

<body>
<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Einkausliste</span>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<!-- Your content goes here -->
<!-- Simple Textfield -->
<form onsubmit="addProdukt()">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="textfeld1">
<label class="mdl-textfield__label" for="textfeld1">Produktname</label>
</div>
<!-- Mini FAB button -->
<button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+
</button>

</form>


<ul class="demo-list-control mdl-list" id="liste">
<script>
function addProdukt() {

liste.innerHTML = `
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">person</i>
Bryan Cranston
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="list-checkbox-1">
<input type="checkbox" id="list-checkbox-1" class="mdl-checkbox__input" />
</label>
</span>
</li>

`;
textfeld1.value = ""

}

</script>
</ul>

</div>


</main>
</div>


</body>

</html>
 
basti1012

basti1012

Well-known member
Beiträge
210
Punkte Reaktionen
15
Weil du submit Button nutzt.
Nehme einen normalen Button und nehme ein click Event auf den Button. Das onsubmit kann aus den Form-Weg
Du hast 2-mal die Funktion addProdukt() im Code stehen.
Ein zweiter Artikel kann so nicht hinzugefügt werden, weil du das erste immer wieder überschreibst.
Du liest den Inhalt vom Input Feld gar nicht aus.

Was du brauchst, ist ja eigentlich eine normale To-do-Liste, nur halt etwas geändert als Einkaufsliste
https://codepen.io/cassie-codes/pen/pYwXwb
 
Zuletzt bearbeitet:
Thema:

Problem mit Einkaufsliste in HTML5

Oben Unten