This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

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
<!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
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:
'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
Als Lösung markieren Zitieren


Gehe zu:


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