JS はシンプルな todoList (メモ帳) 効果を実装します

<ヘッド>
  <メタ文字セット="UTF-8">
  <title>ToDoリスト</title>
//CSS ファイルをインポート <link rel="stylesheet" href="todoList.css" >
</head>
<本文>
<div class="myhead">
   <h2>私のToDoリスト</h2>
  <テーブル>
    <tr>
      <td><input type="text" placeholder="ToDo 項目を入力してください..." id="things"></td>
      <td> <span id="add" onclick="addElement()">追加</span></td>
    </tr>
  </テーブル>
</div>
 
//ToDo リスト セクション、コンテンツは動的に生成されます<ul></ul>
 
<div class="test2"></div>
</本文>
<!-- JavaScript 要素を最後に置いてください。そうしないと、JavaScript の実行時に DOM ツリーがまだ構築されていないため、予期しないエラーが発生します -->
<script src="todoList.js" type="text/javascript"></script>
</html>

@フォントフェイス {
  font-family: 'iconfont'; /* プロジェクト ID 2680005 */
  ソース: url('//at.alicdn.com/t/font_2680005_2v81j5og00f.woff2?t=1626424842361') フォーマット('woff2'),
  url('//at.alicdn.com/t/font_2680005_2v81j5og00f.woff?t=1626424842361') フォーマット('woff'),
  url('//at.alicdn.com/t/font_2680005_2v81j5og00f.ttf?t=1626424842361') フォーマット('truetype');
}
 
体 {
  マージン: 0;
  パディング: 0;
}
*{
  ボックスのサイズ: 境界線ボックス;
}
.私の頭{
   背景色: ライトピンク;
   テキスト配置: 中央;
   パディング: 5px 0px 10px 0px;
   色: アリスブルー;
 }
  テーブル{
  マージン: 0 自動;
}
 ＃もの{
   幅: 180ピクセル;
   高さ: 30px;
   境界線の半径: 3px;
   アウトライン: なし;
   境界線: 実線 1px 白;
 }
 ＃追加{
   表示: インラインブロック;
   幅: 80ピクセル;
   高さ: 30px;
   背景色: ゲインズボロ;
   色: グレー;
   境界線の半径: 3px;
   行の高さ: 30px;
 }
  #追加:ホバー{
    カーソル: ポインタ;
    背景色: ダークグレー;
    色: グレー;
  }
ul{
  マージン: 0px;
  パディング: 0px;
}
  ul li{
    リストスタイル: なし;
    /*テキスト配置: 中央;*/
    位置: 相対的;
    パディング左:40px;
    高さ: 40px;
    行の高さ: 40px;
  }
  ul li:n番目の子(奇数) {
  背景色: #f9f9f9;
}
  ul li:hover{
  カーソル: ポインタ;
  背景色: #dddddd;
}
 
  ul li.check{
  背景色: #888888;
  テキスト装飾: 取り消し線;
  色: #f9f9f9;
}
  ul li.check::before{
 
    コンテンツ： '';
    位置: 絶対;
    境界線の色: #fff;
    境界線のスタイル: solid;
    境界線の幅: 0 2px 2px 0;
    上: 10px;
    左: 16px;
 
    変換: 回転(45度);
    高さ: 15px;
    幅: 7px;
}
。近い{
  位置: 絶対;
  右: 0px;
  上: 0px;
  パディング: 0px 20px;
  フォントサイズ: 16px;
}
.close:hover{
  背景色: #f44336;
  色: 白;
}

//1. 各スパンの後に閉じるノードを追加します var myNodelist = document.getElementsByTagName ("li")
 
(var i=0;i<myNodelist.length;i++) の場合
{
  var span = document.createElement("span");
 
  var txt = document.createTextNode("\u00D7");
 
  span.className="閉じる";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
 
}
 
//2. 削除イベントを処理する var close = document.getElementsByClassName("close")
(var i=0;i<close.length;i++) の場合
{
  close[i].onclick=関数() {
    //parentElement は現在のノードの親要素ノードを返すことを意味します var div = this.parentElement
    div.style.display="なし"
  }
}
 
//3. タスク完了イベントの処理 var list = document.querySelector ("ul")
console.log(リスト)
list.addEventListener('click',関数(ev) {
//event.target 属性はイベント委譲を実装するために使用できます。たとえば、イベントを ul にバインドしますが、li がクリックされたときにトリガーできます //tagName は要素のタグ名です if (ev.target.tagName === 'LI')
{
  // トグルメソッドは選択された要素のhide()とshow()を切り替えます //classListは要素のクラスに対して引き続き動作します ev.target.classList.toggle('check')
}
}、間違い）;
 
//4. プロセスクリックの追加ボタンをクリックし、ToDo 項目をリストに追加する function addElement(){
  var things = document.getElementById('things').value
 
 // アラート(localStorage.setItem("mutodolist",JSON.stringify(things)))
 
  var li = document.createElement('li')
 
  var t = document.createTextNode(もの)
 
  if (もの == '')
  {
    alert("保留中のイベントを入力してください")
  }
  それ以外
  {
    リストに追加子(li)
    li.appendChild(t)
  }
 
  var span = document.createElement('span')
  var txt = document.createTextNode('\u00D7')
 
  span.className='閉じる'
  span.appendChild(txt)
  li.appendChild(スパン)
 
  (var i=0;i<close.length;i++) の場合
  {
    close[i].onclick=関数() {
      var div = this.parentElement
      div.style.display="なし"
    }
  }
}