JS implementiert einen einfachen TodoList-Effekt (Notizblock)

<Kopf>
  <meta charset="UTF-8">
  <Titel>Aufgabenliste</Titel>
//CSS-Datei importieren <link rel="stylesheet" href="todoList.css" >
</Kopf>
<Text>
<div Klasse="meinKopf">
   <h2>Meine ToDo-Liste</h2>
  <Tabelle>
    <tr>
      <td><input type="text" placeholder="Bitte geben Sie Ihre Aufgaben ein..." id="things"></td>
      <td> <span id="add" onclick="addElement()">hinzufügen</span></td>
    </tr>
  </Tabelle>
</div>
 
//Abschnitt „To-Do-Liste“, Inhalt wird dynamisch generiert<ul></ul>
 
<div Klasse="test2"></div>
</body>
<!--Fügen Sie das JavaScript-Element am Ende ein. Andernfalls ist der DOM-Baum bei der Ausführung von JavaScript noch nicht erstellt und es treten unerwartete Fehler auf-->
<script src="todoList.js" type="text/javascript"></script>
</html>

@Schriftart {
  Schriftfamilie: 'Iconfont'; /* Projekt-ID 2680005 */
  Quelle: URL ('//at.alicdn.com/t/font_2680005_2v81j5og00f.woff2?t=1626424842361') Format ('woff2'),
  url('//at.alicdn.com/t/font_2680005_2v81j5og00f.woff?t=1626424842361') format('woff'),
  URL ('//at.alicdn.com/t/font_2680005_2v81j5og00f.ttf?t=1626424842361') Format ('TrueType');
}
 
Körper {
  Rand: 0;
  Polsterung: 0;
}
*{
  Box-Größe: Rahmenbox;
}
.meinKopf{
   Hintergrundfarbe: hellrosa;
   Textausrichtung: zentriert;
   Polsterung: 5px 0px 10px 0px;
   Farbe: Aliceblau;
 }
  Tisch{
  Rand: 0 automatisch;
}
 #Dinge{
   Breite: 180px;
   Höhe: 30px;
   Rahmenradius: 3px;
   Gliederung: keine;
   Rand: durchgehend 1 Pixel weiß;
 }
 #hinzufügen{
   Anzeige: Inline-Block;
   Breite: 80px;
   Höhe: 30px;
   Hintergrundfarbe: Gainsboro;
   Farbe: grau;
   Rahmenradius: 3px;
   Zeilenhöhe: 30px;
 }
  #hinzufügen:hover{
    Cursor: Zeiger;
    Hintergrundfarbe: dunkelgrau;
    Farbe: grau;
  }
ul{
  Rand: 0px;
  Polsterung: 0px;
}
  ul li{
    Listenstil: keiner;
    /*Textausrichtung: zentriert;*/
    Position: relativ;
    Polsterung links: 40px;
    Höhe: 40px;
    Zeilenhöhe: 40px;
  }
  ul li:n-tes-Kind(ungerade) {
  Hintergrundfarbe: #f9f9f9;
}
  ul li:hover{
  Cursor: Zeiger;
  Hintergrundfarbe: #dddddd;
}
 
  ul li.check{
  Hintergrundfarbe: #888888;
  Textdekoration: durchgestrichen;
  Farbe: #f9f9f9;
}
  ul li.check::before{
 
    Inhalt: '';
    Position: absolut;
    Rahmenfarbe: #fff;
    Rahmenstil: durchgezogen;
    Rahmenbreite: 0 2px 2px 0;
    oben: 10px;
    links: 16px;
 
    transformieren: drehen (45 Grad);
    Höhe: 15px;
    Breite: 7px;
}
.schließen{
  Position: absolut;
  rechts: 0px;
  oben: 0px;
  Polsterung: 0px 20px;
  Schriftgröße: 16px;
}
.schließen:hover{
  Hintergrundfarbe: #f44336;
  Farbe: weiß;
}

//1. Fügen Sie nach jedem Span einen Schließknoten hinzu var myNodelist = document.getElementsByTagName ("li")
 
für (var i=0;i<myNodelist.length;i++)
{
  var span = document.createElement("span");
 
  var txt = document.createTextNode("\u00D7");
 
  span.className="schließen";
  span.appendChild(txt);
  meineKnotenliste[i].appendChild(span);
 
}
 
//2. Löschereignis verarbeiten var close = document.getElementsByClassName("close")
für (var i=0;i<close.length;i++)
{
  schließen[i].onclick=function () {
    //parentElement bedeutet, den übergeordneten Elementknoten des aktuellen Knotens zurückzugeben var div = this.parentElement
    div.style.display="keine"
  }
}
 
//3. Verarbeiten des Taskabschlussereignisses var list = document.querySelector ("ul")
console.log(Liste)
list.addEventListener('klicken',Funktion (ev) {
//Das Attribut event.target kann verwendet werden, um eine Ereignisdelegierung zu implementieren, z. B. um ein Ereignis an ul zu binden, es kann jedoch ausgelöst werden, wenn auf li geklickt wird //tagName ist der Tag-Name des Elements, wenn (ev.target.tagName === 'LI')
{
  //Die Umschaltmethode wechselt zwischen hide() und show() für das ausgewählte Element. //classList führt die Arbeit an der Klasse des Elements weiter aus. ev.target.classList.toggle('check')
}
},FALSCH);
 
//4. Klicken Sie auf die Schaltfläche „Hinzufügen“ und fügen Sie der Listenfunktion addElement(){ einen Aufgabeneintrag hinzu.
  var Dinge = document.getElementById('Dinge').value
 
 // Alarm (localStorage.setItem("mutodolist",JSON.stringify(Dinge)))
 
  var li = document.createElement('li')
 
  var t = document.createTextNode(Dinge)
 
  wenn (Dinge == '')
  {
    alert("Bitte geben Sie die ausstehenden Ereignisse ein")
  }
  anders
  {
    list.anhängenKind(li)
    li.appendChild(t)
  }
 
  var span = document.createElement('span')
  var txt = document.createTextNode('\u00D7')
 
  span.className='schließen'
  span.appendChild(txt)
  li.appendChild(span)
 
  für (var i=0;i<close.length;i++)
  {
    schließen[i].onclick=function () {
      var div = dieses.übergeordnetesElement
      div.style.display="keine"
    }
  }
}