[JavaScript][L1] テキストボックスのコンテンツ(div)を別コンテンツ(div)に転記(生成)する

Last updated at 2024-11-16Posted at 2024-11-11

環境

MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

ソースコード外観

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>ToDo(JS)</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="input-area">
      <input id="add-text" placeholder="ToDoを入力" />
      <button id="add-button">追加</button>
    </div>
    <div class="incomplete-area">
      <p class="title">未完了のToDo</p>
      <ul id="incomplete-list">
        <!-- 完成系の例としてliタグ以下を作成している
        <li>
          <div class="list-row">
            <p class="todo-item">ToDoです</p>
            <button>完了</button>
            <button>削除</button>
          </div>
        </li> -->
      </ul>
    </div>
    <script src="./index.mjs" type="module"></script>
  </body>
</html>

JavaScript

import "./styles.css";

const onClickAdd = () => {
  // テキストボックスの値を取得し、初期化する
  const inputText = document.getElementById("add-text").value;
  document.getElementById("add-text").value = "";

  // li生成
  const li = document.createElement("li");

  // div生成
  const div = document.createElement("div");
  div.className = "list-row";

  // p生成
  const p = document.createElement("p");
  p.className = "todo-item";
  p.innerText = inputText;

  // button(完了)タグ生成
  const completeButton = document.createElement("button");
  completeButton.innerText = "完了";
  completeButton.addEventListener("click", () => {
    alert("完了");
  });

  // button(削除)タグ生成
  const deleteButton = document.createElement("button");
  deleteButton.innerText = "削除";
  deleteButton.addEventListener("click", () => {
    alert("削除");
  });

  // liタグの子要素に各要素を設定
  div.appendChild(p);
  div.appendChild(completeButton);
  div.appendChild(deleteButton);
  li.appendChild(div);

  // id="incomplete-list"の`ul`タグに子要素を設定した`li`タグを追加
  document.getElementById("incomplete-list").appendChild(li);
};

document.getElementById("add-button").addEventListener("click", onClickAdd);

手順

HTMLファイルにテキストボックスとなるdivtagにinputtagとbuttontagを設定する

<input id="add-text" placeholder="ToDoを入力" />
<button id="add-button">追加</button>

JSファイルにHTMLファイルのadd-buttonがclickされた際に、onClick関数が動くようにする
```
document.getElementById("add-button").addEventListener("click", onClickAdd);
```

テキストボックスの値を取得し、初期化する

const inputText = document.getElementById("add-text").value;
document.getElementById("add-text").value = "";

li生成

const li = document.createElement("li");

div生成

const div = document.createElement("div");
div.className = "list-row";

p生成

const p = document.createElement("p");
p.className = "todo-item";
p.innerText = inputText;

button(完了)タグ生成

const completeButton = document.createElement("button");
completeButton.innerText = "完了";
// 仮の`click`イベントとして`alert("完了")`で設定している = clickされた時の関数はここに記載していく
completeButton.addEventListener("click", () => {
    alert("完了");
});

button(削除)タグ生成

deleteButton.innerText = "削除";
// 仮の`click`イベントとして`alert("削除")`で設定している = clickされた時の関数はここに記載していく
deleteButton.addEventListener("click", () => {
    alert("削除");
});

liタグの子要素に各要素を設定
完成例として作成しているhtmlを参考にすると良い

div.appendChild(p);
div.appendChild(completeButton);
div.appendChild(deleteButton);
li.appendChild(div);

※HTMLファイルから一部抜粋

<!-- 完成例としてliタグ以下を作成している
    <li>
        <div class="list-row">
            <p class="todo-item">ToDoです</p>
            <button>完了</button>
            <button>削除</button>
        </div>
    </li> -->

id="incomplete-list"のulタグに子要素を設定したliタグを追加
```
document.getElementById("incomplete-list").appendChild(li);
```

Tips

JavaScriptからHTMLにアクセスできるように、識別が必要なtagにはidを追加する。

参考リンク

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up