JavaScriptでTodoリストの連番とボタンが適切な場所に実装できない。

Question

解決済

4

回答数

JavaScriptでTodoリストの連番とボタンが適切な場所に実装できない。

2021/07/26 10:37更新

javascript 初心者

JavaScriptでTodoリストを作成しています。

Taskを追加した際に、Taskの前に連番、Taskの後にボタンが表示されるように実装したいのですが、思った通りの動作ができません。色々調べて実装したのですが、これ以上積んでわからない状態です。何方かアドバイスをお願いします。

期待する動作

①タスクを追加した際に、タスクの前に、IDの番号が表示され、連番になる。 ②タスクを追加した際に、タスクの後に、作業中と削除のボタンが表示される。

現在の状況

タスクを追加した際に、IDの番号が表示されない

※下記のソースコードは参考にしたページのソースを雛形としています。

[簡素なtodoリストをjavascriptで作る] (https://qiita.com/takeshi_104/items/3138195ba0c58e37b1c3)

『index.html』

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>課題③</title>
</head>
<body>
    <h1>TODOリスト</h1>
    
    <p class="radio">
      <input type="radio" id="r1" name="list" value="1" checked><label for="r1">全て</label>
      <input type="radio" id="r2" name="list" value="2"><label for="r2">作業中</label>
      <input type="radio" id="r3" name="list" value="3"><label for="r3">完了</label>
    </p>
    
    <table>
      <thead>
        <tr>
        <th>ID</th>
        <th>コメント</th>
        <th>状態</th>
      </tr>
      </thead>
      <tbody id="list">
      <tr>
        <td></td>
      </tr>
      </tbody>
    </table>
  
    <h2>新規タスクの追加</h2>
    <input type="text" id="newtask">
    <button id="add">追加</button>

    <script src="main.js"></script>
</body>
</html>

『main.js』

'use strict';
{
//値を読み取る
const newtask = document.getElementById('newtask');

// 入力された値をリストに追加する
const add = document.getElementById('add');

// 連番用idを用意
let id = 0;
add.addEventListener('click',() => {

if(newtask.value !=='') {
// TODOリストに表示する
const list = document.getElementById('list'); 

// div要素を作成
const wrapper = document.createElement('div');
wrapper.className = 'wrap';
const divone = document.createElement('div');
const divtwo = document.createElement('div');

// 作成した要素に追加 ①
list.appendChild(wrapper);
wrapper.appendChild(divone);
wrapper.appendChild(divtwo);

// p.button要素の作成 ②
const p = document.createElement('p');
p.className = 'divonep';

const btnone = document.createElement('button');
btnone.innerHTML = '削除';
btnone.className = 'btnone';
const btntwo = document.createElement('button');
btntwo.innerHTML = '作業中';
btntwo.className = 'btntwo';

// ②を①に追加
wrapper.insertBefore(p, divone);
wrapper.insertBefore(btnone, divtwo);
wrapper.insertBefore(btntwo, btnone);

// inputで読み取った値を表示
p.innerHTML = newtask.value;
// idを表示
p.innerHTML += `${++id}`;

}    
});
}

確認したいことがあったら質問者に確認してヤァ！

回答

yusukeM

2021/07/26

ありがとう!

返信

yusukeM

2021/07/26

ありがとう!

返信

yusukeM

2021/07/26

ベストアンサー

返信

yusukeM

2021/07/26

ありがとう!

返信

geno

未経験からフロントエンジニアへの転職を目指し、プログラミングを勉強中。 2023年より受託開発企業にて働く。

Answer 1

ただいま確認中です原因が分かり次第回答しますね!

Answer 2

①の問題についてですが連番表示をしたい場合はolタグを使用しますコードをわかりやすくするために必要のないコードは消しています動きを確認してみてください

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>課題③</title>
  </head>

  <body>
    <h1>TODOリスト</h1>

    <h2>新規タスクの追加</h2>
    <input type="text" id="newtask" />
    <button id="add">追加</button>

    <ol id="list"></ol>

    <script src="main.js"></script>
  </body>
</html>

// inputタグを取得して変数に入れる
const newtask = document.getElementById('newtask')

// buttonタグを取得して変数に入れる
const add = document.getElementById('add')

add.addEventListener('click', () => {
  // valueが空なら処理中止　こっちの方が見やすいと思います
  if (newtask.value === '') {
    return
  }

  // olタグを取得して変数に入れる
  const list = document.getElementById('list')

  // liタグを作成して変数に入れる
  const li = document.createElement('li')

  // liタグの中に入力したテキストを入れる
  li.innerText = newtask.value

  // olタグの中にliタグを追加
  list.appendChild(li)

  // 最後は入力した値を消した方がいいです
  newtask.value = ''
})

Answer 3

②の問題についてですがolタグで実現する方が簡単なのですが genoさんがテーブルを使っているためテーブルで実現してみました少し難しい処理が登場しますが分からないところは質問してください

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>課題③</title>
  </head>

  <body>
    <h1>TODOリスト</h1>

    <h2>新規タスクの追加</h2>
    <input type="text" id="newtask" />
    <button id="add">追加</button>

    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>コメント</th>
          <th>状態</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="list"></tbody>
    </table>

    <script src="main.js"></script>
  </body>
</html>

const newtask = document.getElementById('newtask')

const add = document.getElementById('add')

add.addEventListener('click', () => {
  if (newtask.value === '') {
    return
  }

  const list = document.getElementById('list')

  // 少し難しいですがtbodyの中の要素の数を取得して連番を取得します
  const id = list.children.length + 1

  const comment = newtask.value

  // 分かりやすい変数名をつけます
  const workButton = document.createElement('button')

  workButton.innerText = '作業中'

  // 分かりやすい変数名をつけます
  const deleteButton = document.createElement('button')

  deleteButton.innerText = '削除'

  // テーブルの行に必要なデータの配列を作成します
  const columns = [id, comment, workButton, deleteButton]

  //　テーブルの行を作成します
  const tr = document.createElement('tr')

  // 配列の中身を一つずつ取り出して処理をします
  columns.forEach((column) => {
    // テーブルの列を作成します
    const td = document.createElement('td')

    // すこし難しいですがHTMLタグなら処理を変更しています
    if (column instanceof HTMLElement) {
      td.appendChild(column)
    } else {
      td.innerText = column
    }

    // 行に列を追加します
    tr.appendChild(td)
  })

  // テーブルに行を追加します
  list.appendChild(tr)

  newtask.value = ''
})

Answer 4

何か分からないところがあれば気軽に質問してもらって大丈夫です