JavaScriptを書き換えたい

目標物を作っている途中です。
追加ボタンをクリックすると、フォームで入力した文字と同列に作業中ボタンと削除ボタンを追加したいです。

HTMLで書いたbtn要素を「作業中」と「削除」用に2つ取得し、ブラウザ上に反映させたいのですが、どう調べればいいのか分からず、手こずっています。

Javascriptでhtmlを動的に書き換える方法！ - Qiita
を見て、
innerHTMLで書き換えたりするのかと思い試行錯誤したのですが、今回の事例では当てはまらないようです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>ToDoリスト</title>
8<link rel="stylesheet" href="css/styles.css">
9
10</head>
11<body>
12<h1>ToDoリスト</h1>
13
14<div class="radiobutton">
15    <input type="radio" id="button-1" name="radio1" value="1" checked />
16    <label for="button-1">すべて</label>
17    <input type="radio" id="button-2" name="radio1" value="2" />
18    <label for="button-2">完了中</label>
19    <input type="radio" id="button-3" name="radio1" value="3" />
20    <label for="button-3">作業中</label>
21
22
23
24  <h3 id="id_h3">ID コメント 状態</h3>
25  <h2>新規タスクの追加</h2>
26  
27
28  <p id=id_p>
29      <input type="text" id="id_text" value=""> 
30      <button id="btn" type="btn" class="button"> 追加</button>
31  </p>
32 
33  <script>
34    
35    const btn = document.getElementById('btn');
36    btn.addEventListener('click', () => { 
37      const text = document.getElementById('id_text').value;
38      const p1 = document.getElementById('id_p');
39      const p2 = document.getElementById('id_p');
40      const h2 = document.getElementById('id_h2');
41
42      //const button = <button id="btn" type="btn" class="button"> 作業中</button>
43      //const button = document.createElement('btn');
44      //btn.textContent = '作業中';
45      //document.body.appendChild(button);
46
47      document.body.insertBefore(document.createTextNode(text), h2);
48
49    });
50
51      
52
53  </script>
54
55</body>
56</html>

CSS
1.button {
2  border-radius: 10px;
3}
4.button:hover {
5  background-color: #59b1eb;
6}
7.button:active {
8  top: 3px;
9  box-shadow: none;
10}
11
12
13.radiobutton label {
14	padding: 0 0 0 24px;	/* ラベルの位置 */
15	font-size: 16px;
16	line-height: 28px;		/* ボタンのサイズに合わせる */
17	display: inline-block;
18	cursor:	pointer;
19	position: relative;
20}
21.radiobutton label:before {
22	content: '';
23	width: 14px;		/* ボタンの横幅 */
24	height: 14px;		/* ボタンの縦幅 */
25	position: absolute;
26	top: 0;
27	left: 0;
28	background-color: rgb(0, 162, 255);
29	border-radius: 50%;
30}
31.radiobutton input[type="radio"] {
32	display: none;
33}
34.radiobutton input[type="radio"]:checked + label:after {
35	content: '';
36	width: 3px;		/* マークの横幅 */
37	height: 3px;		/* マークの縦幅 */
38	position: absolute;
39  top: 5.5px;
40	left: 5.5px;
41	background-color: #fff;
42	border-radius: 50%;
43}

m.ts10806

2019/11/28 13:08

現在のコードはどこまでできている（またはどのような問題が起きている）のでしょうか

asako1010

2019/11/28 13:24

コードは掲載したところまで出来ています。文章書き直しました。 HTMLで書いたbtn要素を「作業中」と「削除」用に2つ取得し、その二つをブラウザ上に反映させたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<title>ToDoリスト</title>
8<link rel="stylesheet" href="css/styles.css">
9
10</head>
11<body>
12	<h1>ToDoリスト</h1>
13
14	<div class="radiobutton">
15		<input type="radio" id="button-1" name="radio1" value="1" checked />
16		<label for="button-1">すべて</label>
17		<input type="radio" id="button-2" name="radio1" value="2" />
18		<label for="button-2">完了中</label>
19		<input type="radio" id="button-3" name="radio1" value="3" />
20		<label for="button-3">作業中</label>
21
22
23		<div id='org_div1'>ボタンをクリックすると、動的にテキストが作成されます。</div>
24		<h3 id="id_h3">ID コメント 状態</h3>
25		<div id="todo"></div>
26		<h2>新規タスクの追加</h2>
27
28
29		<p id=id_p>
30			<input type="text" id="id_text" value="">
31			<button id="btn" type="button" class="button">追加</button>
32		</p>
33
34	</div>
35	<script type="text/javascript">
36	var id = 0;
37		btn.addEventListener('click', function() {
38
39	        var idEl = document.createElement("span");
40	        idEl.textContent = id;
41	        var comment = 'aaa';
42	        var commentEl = document.createElement("span");
43	        commentEl.textContent = comment;
44
45	        const btn1El = document.createElement("button");
46	        btn1El.textContent = "作業中";
47	        const btn2El = document.createElement("button");
48	        btn2El.textContent = "削除";
49
50	        const divEl = document.createElement("div");
51	        divEl.appendChild(idEl);
52	        divEl.appendChild(commentEl);
53	        divEl.appendChild(btn1El);
54	        divEl.appendChild(btn2El);
55
56	        const todoEl = document.getElementById("todo");
57	        todoEl.appendChild(divEl);
58	        id++;
59
60        }, false);
61	</script>
62</body>
63</html>