Java Script mit Material Design Lite verbinden

JSDo · 13. Feb. 2024

Hallo, nach einem youtube video codierte ich folgenden Code. Für das Layout wurde Material Design Lite genutzt. Der Code funktioniert nicht. Es ploppt ein Listenelement kurz auf und verschwindet wieder. Der Fehler muss innerhalb der Funktion "addToDo()" liegen. Ich freue mich, falls jemand den Fehler findet.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>
.demo-list-control {
  width: 300px;
}
    .page-content{
        padding: 0px 100px;

    }
</style>
<script>
        function addToDo() {
          todolist.innerHTML +=          ` <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <i class="material-icons  mdl-list__item-avatar">label</i>
      $(todofield.value)
    </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" checked />
      </label>
    </span>
  </li>`;
            
        }

</script>
</head>
<body>
    <!-- Always shows a header, even in smaller screens. -->
<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">ToDoListe</span>
        <!-- Add spacer, to align navigation to the right -->
        <div class="mdl-layout-spacer"></div>
        <!-- Navigation. We hide it in small screens. -->
        <nav class="mdl-navigation mdl-layout--large-screen-only">
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
        </nav>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">ToDoListe</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <div class="page-content"><!-- Your content goes here -->
    
        <form onsubmit="addToDo()" >
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
              <input class="mdl-textfield__input" type="text" id="todofield">
              <label class="mdl-textfield__label" for="todofield">ToDoEinfügen</label>
            </div>

            <!--button -->
            <!-- Colored raised button -->
                <button typ="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                 Speichern
                </button>
          </form>

          <!--Liste-->
          <ul class="demo-list-control mdl-list" id="todolist">


          </ul>
            
          
    
    </div>
    </main>
  </div>
</body>
</html>

mo · 13. Feb. 2024

$(todofield.value) ist falsch. es muss `${todofield.value}` heissen.
hier die ganze funktion:

Javascript:

function addToDo() {
  todolist.innerHTML += `
    <li class="mdl-list__item">
      <span class="mdl-list__item-primary-content">
        <i class="material-icons mdl-list__item-avatar">label</i>
        ${todofield.value}
      </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" checked />
        </label>
      </span>
    </li>`;
}

JSDo · 14. Feb. 2024

Es funktionierte bei mir noch nicht: Ich schickte es zweimal durch ChatGPT. Nun funktioniert es bei mir.
Kommentar von ChatGPT: "In dieser Version wird event.preventDefault(); verwendet, um das Standardverhalten des Formulars zu verhindern, was normalerweise zu einem Neuladen der Seite führen würde. Außerdem wird todofield.value nach dem Hinzufügen des Elements zur Liste zurückgesetzt, um das Eingabefeld zu leeren. Probier dies aus und schau, ob es das Problem behebt."
Hier der funktionierende Code:
[ICODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
.demo-list-control {
width: 300px;
}
.page-content {
padding: 0px 100px;
}
</style>
<script>
function addToDo(event) {
event.preventDefault(); // Prevent form submission and page reload
todolist.innerHTML += `
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-avatar">label</i>
${todofield.value}
</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" checked />
</label>
</span>
</li>`;
todofield.value = ""; // Clear the input field
}
</script>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">ToDoListe</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">ToDoListe</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<form onsubmit="addToDo(event)">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="todofield">
<label class="mdl-textfield__label" for="todofield">ToDoEinfügen</label>
</div>
<button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Speichern
</button>
</form>
<ul class="demo-list-control mdl-list" id="todolist"></ul>
</div>
</main>
</div>
</body>
</html>
][/ICODE]

Java Script mit Material Design Lite verbinden

JSDo

New member

mo

Administrator

JSDo

New member