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>
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>
