appenChild Probleme - Druckversion

appenChild Probleme - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: appenChild Probleme (/showthread.php?tid=1742)

appenChild Probleme - RicEfron - 31.10.2022

Guten Abend an alle,

ich hab ein Problem mit "appendChild" egal ob ich ein Tutorial aus Google raussuche, ein Youtube Video oder was eigenes erstelle. Sobald es um "appendChild" geht erhalte ich immer Fehler beim Testen. "Uncaught TypeError: Cannot read properties of null (reading 'value')"

ich füge euch mal meine HTML und JS Codes ein vielleicht findet jemand meinen Fehler.
Nachfolgendes habe ich 1 zu 1 übernommen und bei mir erscheint der Fehler.
Quelle: Einkaufslisten Web-App - JavaScript Tutorial für Anfänger (lerneprogrammieren.de)

Index.html

Code:
<!DOCTYPE html>

<html lang="de">

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

    <link rel="stylesheet" href="./style.css" />

    <title>Einkaufsliste</title>

</head>

<body>

    <h1> Einkaufslisten App</h1>

    <img src="https://lerneprogrammieren.de/wordpress/wp-content/uploads/einkaufswagen.png" height="35px">

    <div> 

        <input type="text" placeholder="Neuer Eintrag..">

        <button id="enter"> Hinzufügen</button>

    </div>

    <ul>

    </ul>

    <script src="./main.js"> </script>

</body>

</html>

main.js

Code:
var enterButton = document.getElementById("enter");

  var input = document.getElementById("benutzerInput");

  var ul = document.querySelector("ul");

  var item = document.getElementsByTagName("li");

  enterButton.addEventListener("click", erstellenEintrag);

  function erstellenEintrag() {

    var li = document.createElement("li");

    li.appendChild(document.createTextNode(input.value));

    ul.appendChild(li);

    input.value = "";

  }

wenn ich die Zeilen "li.appendChild(...... und input.value= ""; entferne funktioniert das Erstellen eines leeren li elements ohne Probleme.

RE: appenChild Probleme - rzscout - 01.11.2022

Hi RicEfron,

gerne gebe ich dir ein Codebeispiel. Meine persönliche Empfehlung ist; kauf dir ein Buch über den Einstieg in JavaScript oder leihe in der Bücherei eines aus.

Hier mein Beispiel:

Code:
'use strict';

//Variablen werden vordeklariert

var enterButton, input, myUL;

//Lade Funktion init erst wenn der DOM vollständig geladen wurde

document.addEventListener('DOMContentLoaded', init);

function init() {

    // Variablenzuweisung; Selektierung von Elementen aus dem DOM

    enterButton = document.getElementById('enter'); // Unser EnterButton

    input = document.querySelector('input'); // Unser Inputfeld

    myUL = document.querySelector('ul'); // Unser ul-Element

    // Ein EvenListener für den enterButton

    enterButton.addEventListener('click', function() {

        // Speicher Inhalt von input in einer lokalen Varaible

        let eingabe = input.value;

        // Erstellt ein Element

        let elem = document.createElement('li');

        // Weist dem Element einen Textinhalt zu aus der Variable 'eingabe'

        elem.textContent = eingabe;

        // Fügt dem selektierten ul ein Kindelement hinzu und zwar 'elem'

        myUL.appendChild(elem);

    });

}

Wenn du weitere Fragen hast, kannst du diese gerne ins Forum posten.

Viel Erfolg und Grüße

rzscout