<LI>私のToDoリストを作成しようとすると、タグが列として表示が、それを動作させることができません

ウェブ-DEV-JR：

私は義務ToDoリストアプリを構築し、スタイリングと奇妙な問題に実行していますよ。私は李を作成するときに私は彼らが互いの上に積み重ねられ、インラインフレックスと列を表示したいです。しかし、彼らは現在、あなたがそれらを作成して列に並ん表示します。

私はかなりしばらくの間これで周りにプレイしたとまだ私は仕事にこれを取得することはできません方法を見つけ出すことはできません。私はそれを動作させるためにしようとしているすべての要素を対象としましたが、それは正しく表示されません。

誰もが私が欠けているかのアイデアを持っていますか？

https://codepen.io/constequalsexcel/pen/ZEGGoLq

function addTodo() {
  let node = document.createElement('li');
  node.setAttribute('class', 'list-item');
  let text = document.getElementById('todo-input').value;
  let textnode = document.createTextNode(text);
  node.appendChild(textnode);

  let deleteButton = document.createElement('button');
  let deleteButtonX = document.createTextNode('X');
  deleteButton.appendChild(deleteButtonX);

  let StrikeThroughRadio = document.createElement('input');
  StrikeThroughRadio.setAttribute('type', 'checkbox');
  StrikeThroughRadio.addEventListener('click', function(e) {
    if (StrikeThroughRadio.checked === true) {
      e.target.nextElementSibling.style.textDecoration = 'line-through';
      e.target.nextElementSibling.style.color = 'red';
    } else {
      e.target.nextElementSibling.style.textDecoration = 'none';
      e.target.nextElementSibling.style.color = 'black';
    }
  });

  deleteButton.addEventListener('click', function() {
    let deleteLI = document.getElementById('display');
    deleteLI.removeChild(node);
    let RemoveDeleteButton = document.getElementById('display');
    RemoveDeleteButton.removeChild(deleteButton);
    let RemoveStrikeThroughRadio = document.getElementById('display');
    RemoveStrikeThroughRadio.removeChild(StrikeThroughRadio);
  });

  document.getElementById('display').appendChild(StrikeThroughRadio);
  document.getElementById('display').appendChild(node);
  document.getElementById('display').appendChild(deleteButton);
}

function ClearInputOnSubmit() {
  document.getElementById('todo-input').value = '';
}

#header {
  display: flex;
  justify-content: center;
  margin-right: 160px;
}

enter code here ul {
  display: inline-flex;
  list-style: none;
}

.main {
  width: 400px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: auto;
}

#display>li {
  display: inline-flex;
  flex-direction: column;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8" />

  <title>To-Do App</title>

  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <h1 id="header">TO DO LIST</h1>
  <div class="main">
    <div class="todo-container">
      <ul id="display"></ul>
    </div>
    <div class="container">
      <div>
        <input type="text" id="todo-input" />
        <input type="button" value="Add ToDo" id="todo-button" onclick="addTodo(); ClearInputOnSubmit()" />
      </div>
    </div>
  </div>
  <script src="scripts.js"></script>
</body>

</html>

アクヒルAravind：

HTML標準によると、唯一のli内部に許されるulの子供のように、他の要素ulは無効です。ドキュメントを確認してください。

だから私はあなたのコードでは良い変更を行った、スニペットを確認してください。

function addTodo() {
  let node = document.createElement('li');
  node.setAttribute('class', 'list-item');
  let text = document.getElementById('todo-input').value;
  let textnode = document.createElement('span');
  textnode.innerText = text;
  //node.appendChild(textnode);

  let deleteButton = document.createElement('button');
  let deleteButtonX = document.createTextNode('X');
  deleteButton.appendChild(deleteButtonX);
  deleteButton.addEventListener('click', removeNode);

  let StrikeThroughRadio = document.createElement('input');
  StrikeThroughRadio.setAttribute('type', 'checkbox');
  StrikeThroughRadio.addEventListener('click', function(e) {
    StrikeThroughRadio.checked ? e.target.nextElementSibling.classList.add('strike-text') :
      e.target.nextElementSibling.classList.remove('strike-text')
  });


  node.appendChild(StrikeThroughRadio)
  node.appendChild(textnode);
  node.appendChild(deleteButton)


  //document.getElementById('display').appendChild(StrikeThroughRadio);
  document.getElementById('display').appendChild(node);
  //document.getElementById('display').appendChild(deleteButton);

}

function removeNode(e) {
  e.target.parentElement.remove()
}

function ClearInputOnSubmit() {
  document.getElementById('todo-input').value = '';
}

#header {
  display: flex;
  justify-content: center;
  margin-right: 160px;
}

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.main {
  width: 400px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: auto;
}

#display>li {
  display: flex;
  flex-direction: row;
}

.strike-text {
  text-decoration: line-through;
  color: red
}

<h1 id="header">TO DO LIST</h1>
<div class="main">
  <div class="todo-container">
    <ul id="display"></ul>
  </div>
  <div class="container">
    <div>
      <input type="text" id="todo-input" />
      <input type="button" value="Add ToDo" id="todo-button" onclick="addTodo(); ClearInputOnSubmit()" />
    </div>
  </div>
</div>

<LI>私のToDoリストを作成しようとすると、タグが列として表示が、それを動作させることができません

おすすめ