Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
appenChild Probleme
#1
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.
Zitieren
#2
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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste