Zenn
🤖

JavaScript liタグを作成

2024/11/18に公開
CSS
HTML
JavaScript
tech

liタグを作成してulタグに追加する処理です。
タスク管理ページにて、タスク入力欄にタスクを入力して、作成をクリックするとタスクの追加が行えるサイトを使ったのでそれについて書いていきます。タスクはulタグで管理していきます。

まずどのようなサイトかざくっと説明します。

タスク入力欄にタスクを入力して作成ボタンを押すと

タスクが作成されます。
チェックボックスにチェックを入れると

タスク名に横線が引かれます。

削除ボタンを押すと

タスクが消えます。
ざくっとこんな感じ、では説明していきます。

htmlは以下になります。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Todo</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="todo-app">
    <h1>Todoリスト</h1>
    <form>
      <input type="text" id="todo-input" placeholder="新しいタスクを入力" />
      <button type="submit" id="add-button">タスクを追加する</button>
    </form>
    <ul id="todo-list">
    </ul>
  </div>
  <script src="todo.js"></script>
</body>
</html>

cssは以下になります。

body {
    background-color: #F4F4F4;
  }
  
  .todo-app {
    width: 400px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 8px;
  }
  
  h1 {
    text-align: center;
  }
  
  form {
    display: flex;
    margin-bottom: 20px;
  }
  
  #todo-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  #add-button {
    padding: 10px 20px;
    border: none;
    background-color: #007BFF;
    color: #fff;
    cursor: pointer;
    margin-left: 10px;
    border-radius: 4px;
  }
  
  #add-button:hover {
    background-color: #0056b3;
  }
  
  #todo-list {
    list-style-type: none;
    padding: 0;
  }
  
  .todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #f2f2f2;
    border-radius: 4px;
  }
  
  .delete-button {
    padding: 5px 10px;
    border: none;
    background-color: #ff4d4d;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
  }
  
  .delete-button:hover {
    background-color: #cc0000;
  }

  .strikethrough {
    text-decoration: line-through; 
}

処理を行う枠組みの作成

タスクの作成にはJavaScriptを使用します。まず、タスク作成ボタンをクリックしたら処理されるワグ組を作成します。

document.querySelector('#add-button').addEventListener('click', (e) => {
  e.preventDefault(); //処理が終わるとページの更新を行うので、それを止めるためのコード
}

タスクの追加ボタンのidはadd-buttonなので#add-buttonで読み込みます。

入力されたタスクを取得する

入力されたタスクを取得します。

document.querySelector('#add-button').addEventListener('click', (e) => {
  e.preventDefault();

  //入力されたタスクの取得
  const inputElement = document.querySelector("#todo-input");
}

document.querySelectorを使用して取得します。

ulタグの取得と、liタグの作成

document.querySelector('#add-button').addEventListener('click', (e) => {
  e.preventDefault();

  const inputElement = document.querySelector("#todo-input");

  //ulタグの取得
  const ulElement = document.querySelector('#todo-list');
  //liタグを新規作成
  const liElement = document.createElement('li'); 
}

document.createElementでタグを新規作成します。

作成したタグにクラスを設定

document.querySelector('#add-button').addEventListener('click', (e) => {
  e.preventDefault();

  const inputElement = document.querySelector("#todo-input");

  const ulElement = document.querySelector('#todo-list'); 
  const liElement = document.createElement('li'); 

  //todo-itemクラスを設定
  liElement.className = 'todo-item'; 
}

.classNameでクラスの設定ができます。

チェックボックスの作成

タスク完了をチェックするチェックボックスを作成します。

document.querySelector('#add-button').addEventListener('click', (e) => {
  e.preventDefault();

  const inputElement = document.querySelector("#todo-input");

  const ulElement = document.querySelector('#todo-list'); 
  const liElement = document.createElement('li'); 

  liElement.className = 'todo-item';

  //チェックボックスを作成
  const checkboxElement = document.createElement('input');
  checkboxElement.type = 'checkbox';  //typeの設定
  checkboxElement.className = 'task-checkbox';  //クラスの設定
}

createElementでチェックボックスを作成しクラスの設定を行います。
.typeを使用してcheckboxを設定します。

タスク名を作成

タスク名を保持するspanタグを作成します。

document.querySelector('#add-button').addEventListener('click', (e) => {
  e.preventDefault();

  const inputElement = document.querySelector("#todo-input");

  const ulElement = document.querySelector('#todo-list'); 
  const liElement = document.createElement('li'); 

  liElement.className = 'todo-item';

  const checkboxElement = document.createElement('input');
  checkboxElement.type = 'checkbox';
  checkboxElement.className = 'task-checkbox';

  //spanタグの作成
  const spanElement = document.createElement('span');
  spanElement.className = 'task-text'; //クラス名の設定
  spanElement.textContent = inputElement.value; //値の設定
}

同じようにタグの作成を行い、クラス名を設定します。
.textContentを使用して入力欄に入力された値を設定します。

削除ボタンの作成

document.querySelector('#add-button').addEventListener('click', (e) => {
  e.preventDefault();

  const inputElement = document.querySelector("#todo-input");

  const ulElement = document.querySelector('#todo-list'); 
  const liElement = document.createElement('li'); 

  liElement.className = 'todo-item';

  const checkboxElement = document.createElement('input');
  checkboxElement.type = 'checkbox';
  checkboxElement.className = 'task-checkbox';

  const spanElement = document.createElement('span');
  spanElement.className = 'task-text';
  spanElement.textContent = inputElement.value;

  //削除ボタンの作成
  const deleteButtonElement = document.createElement('button');
  deleteButtonElement.className = 'delete-button'; //クラスの設定
  deleteButtonElement.textContent = '削除'; //値の設定
  //削除ボタンをクリックした時にする動作の設定
  deleteButtonElement.addEventListener('click', function() {
    liElement.remove();
  });
}

同じように削除ボタンを作成、クラスの設定、ボタンに表示するラベルを設定していきます。
次にボタンを押した時の処理を追加します。タスクの削除を行うボタンなのでliタグを削除します。
タスクを追加するたびにliElementが作成されるんだからどのliElementが削除されるの？って思うかもしれませんが、今作成したliElementに対して設定しているイメージを持つとわかりやすいと思います。

liタグに各ボタン、タスク名を追加

document.querySelector('#add-button').addEventListener('click', (e) => {
  e.preventDefault();

  const inputElement = document.querySelector("#todo-input");

  const ulElement = document.querySelector('#todo-list'); 
  const liElement = document.createElement('li'); 

  liElement.className = 'todo-item';

  const checkboxElement = document.createElement('input');
  checkboxElement.type = 'checkbox';
  checkboxElement.className = 'task-checkbox';

  const spanElement = document.createElement('span');
  spanElement.className = 'task-text';
  spanElement.textContent = inputElement.value;

  const deleteButtonElement = document.createElement('button');
  deleteButtonElement.className = 'delete-button';
  deleteButtonElement.textContent = '削除';
  deleteButtonElement.addEventListener('click', function() {
    liElement.remove();
  });

  //liタグに各ボタン、タスク名を追加
  liElement.appendChild(checkboxElement); //チェックボックスの追加
  liElement.appendChild(spanElement); //spanタグの追加
  liElement.appendChild(deleteButtonElement); //削除ボタンの追加
}

.appendChildを使用してliElementに各ボタン、タスク名を追加します。

タスク名に横線を引くチェックボックスの作成

document.querySelector('#add-button').addEventListener('click', (e) => {
  e.preventDefault();

  const inputElement = document.querySelector("#todo-input");

  const ulElement = document.querySelector('#todo-list'); 
  const liElement = document.createElement('li'); 

  liElement.className = 'todo-item';

  const checkboxElement = document.createElement('input');
  checkboxElement.type = 'checkbox';
  checkboxElement.className = 'task-checkbox';

  const spanElement = document.createElement('span');
  spanElement.className = 'task-text';
  spanElement.textContent = inputElement.value;

  const deleteButtonElement = document.createElement('button');
  deleteButtonElement.className = 'delete-button';
  deleteButtonElement.textContent = '削除';
  deleteButtonElement.addEventListener('click', function() {
    liElement.remove();
  });

  liElement.appendChild(checkboxElement); //チェックボックスの追加
  liElement.appendChild(spanElement); //spanタグの追加
  liElement.appendChild(deleteButtonElement); //削除ボタンの追加

  //チェックボックスをチェックするとタスク名に横線を引くように設定をする
  checkboxElement.addEventListener('change', function() {
    if (this.checked) {
        spanElement.classList.add('strikethrough'); // ストライククラスを追加
    } else {
        spanElement.classList.remove('strikethrough'); // ストライククラスを削除
    } 
  });
}

addEventListenerを使ってcheckBoxをチェックするとタスク名に横線が引かれるように設定します。

最後にulにliを追加して完了！

document.querySelector('#add-button').addEventListener('click', (e) => {
  e.preventDefault();

  const inputElement = document.querySelector("#todo-input");

  const ulElement = document.querySelector('#todo-list'); 
  const liElement = document.createElement('li'); 

  liElement.className = 'todo-item';

  const checkboxElement = document.createElement('input');
  checkboxElement.type = 'checkbox';
  checkboxElement.className = 'task-checkbox';

  const spanElement = document.createElement('span');
  spanElement.className = 'task-text';
  spanElement.textContent = inputElement.value;

  const deleteButtonElement = document.createElement('button');
  deleteButtonElement.className = 'delete-button';
  deleteButtonElement.textContent = '削除';
  deleteButtonElement.addEventListener('click', function() {
    liElement.remove();
  });

  liElement.appendChild(checkboxElement); //チェックボックスの追加
  liElement.appendChild(spanElement); //spanタグの追加
  liElement.appendChild(deleteButtonElement); //削除ボタンの追加

  //チェックボックスをチェックするとタスク名に横線を引くように設定をする
  checkboxElement.addEventListener('change', function() {
    if (this.checked) {
        spanElement.classList.add('strikethrough'); // ストライククラスを追加
    } else {
        spanElement.classList.remove('strikethrough'); // ストライククラスを削除
    } 
  });

  //ulタグに作成したliタグを追加する
  ulElement.appendChild(liElement);
}

appendChildを使用することでulにliを追加することができます。これでulにliを追加する一連の流れは終了です。

以上になります。作成したタグにクリックした際の処理の設定の仕方がわかるようになりました。

Discussion