Foren
Neue Beiträge
Foren durchsuchen
Was ist neu?
Neue Beiträge
Profilnachrichten
Online
Anmelden
Registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Neue Beiträge
Foren durchsuchen
Menü
Anmelden
Registrieren
App installieren
Installieren
Programmierung
HTML
Problem mit Einkaufsliste in HTML5
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Auf Thema antworten
Beitrag
[QUOTE="Halbmondcode, post: 13107, member: 4460"] 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="[URL]https://fonts.googleapis.com/icon?family=Material+Icons[/URL]"> <link rel="stylesheet" href="[URL]https://code.getmdl.io/1.3.0/material.indigo-pink.min.css[/URL]"> <script defer src="[URL]https://code.getmdl.io/1.3.0/material.min.js[/URL]"></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> [/QUOTE]
Zitate
Authentifizierung
Antworten
Programmierung
HTML
Problem mit Einkaufsliste in HTML5
Oben
Unten
