参考にした動画
学んだこと
・<input> | MDN
・<input type="hidden"> | MDN
・<input type="text"> | MDN
写経したコード + メモ
<!-- 編集対象のメモの本文の値をセットする -->
<!-- 編集対象のメモの本文の値を編集できるようにする 次回に続く-->
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>メモ帳アプリ</title>
</head>
<body>
<div>
<h3>メモの登録</h3>
title<input type="text" id="id-title"><br>
body<textarea id="id-body"></textarea><br>
<button id="id-add-button">メモ登録する</button>
</div>
<div>
<h3>メモの一覧</h3>
<button id="id-delete-button">削除する</button>
<table class="table">
<thead>
<tr>
<th scope="col"><input type="checkbox" id="id-delete-all-memos"></th>
<th scope="col">タイトル</th>
<th scope="col">作成日</th>
<th scope="col">更新日</th>
<th scope="col">編集</th>
</tr>
</thead>
<tbody id="id-memo-list">
</tbody>
</table>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">編集</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- 編集画面のタイトル -->
<div class="modal-body">
<div class="input-group mb-3">
<span class="input-group-text" id="inputGroup-sizing-default">タイトル</span>
<input type="text" id="id-modal-title" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-default">
</div>
<!-- 編集画面の本文 -->
<!-- bodyにidを指定する -->
<div class="form-floating">
<textarea class="form-control" style="height: 150px;" placeholder="Leave a comment here"
id="id-modal-body"></textarea>
<label for="id-modal-body">本文</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" id="id-update-button" class="btn btn-primary">更新</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous">
</script>
</body>
<script>
// メモのタイトルと本文の値(文字列)を取得する。
const titleElement = document.getElementById("id-title")
const bodyElement = document.getElementById("id-body")
const addButton = document.getElementById("id-add-button")
addButton.addEventListener("click",(event)=>{
const title = titleElement.value
const body = bodyElement.value
// 現在時刻を表示する
const now = new Date()
const createdAt = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()
const updatedAt = "なし"
// 時間を元にして作成されたメモにid番号を与えて他のメモと識別する。
// 連打しても異なるidが与えられたのでメモのidは重複しない。
const memoId = now.getTime()
// 新しいtrタグ（メモ）を作成する。
const tr = document.createElement("tr")
tr.setAttribute("id",memoId)
const editButtonId = "id-edit-button-" + memoId
// モーダルの編集機能のタイトルのidを変数化
const idTitleInList = "id-title-in-list-" + memoId
// シングルの中にダブルを書くとダブルの中文字が文字列として扱われる。
// タグごとtr.innerHTMLに代入している
tr.innerHTML = '<td><input class="class-checkbox" data-memo-id="' + memoId + '" type="checkbox"></td><td id="' + idTitleInList + '">' + title + '</td><td>' + createdAt + '</td><td>' + updatedAt + '</td><td><button type="button" data-memo-id="' + memoId + '" id="' + editButtonId + '" class="btn btn-primary">編集</button></td>'
const memoList = document.getElementById("id-memo-list")
memoList.appendChild(tr)
// モーダルの編集機能にメモの本文の値を代入する為に新しいinputタグを作成して
// ユーザーに対して値を見せなくても良いのでhiddenを使用。
const inputForBody = document.createElement("input")
//
inputForBody.setAttribute("id","id-body-in-list-" + memoId)
inputForBody.setAttribute("type","hidden")
inputForBody.value = body
// trの子要素としてinputタグをセットしている。
tr.appendChild(inputForBody)
// モーダルで編集機能を作っていく
const editButton = document.getElementById(editButtonId)
editButton.addEventListener("click",(event)=>{
// モーダルの編集機能にメモのタイトルと本文の値を代入する。
// メモの値を取得する。
const memoId = event.currentTarget.dataset.memoId
const title = document.getElementById("id-title-in-list-" + memoId).innerText
const titleElement = document.getElementById("id-modal-title")
titleElement.value = title
// bodyにメモの本文のidを取得している。
const body = document.getElementById("id-body-in-list-" + memoId).value
const bodyElement = document.getElementById("id-modal-body")
bodyElement.value = body
const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
myModal.show()
})
// 削除機能パターン2
const deleteButton = document.getElementById("id-delete-button")
deleteButton.addEventListener("click",(event)=>{
const checkboxes = document.getElementsByClassName("class-checkbox")
Array.from(checkboxes).forEach((checkbox)=>{
if(checkbox.checked == false){
return false
}
const memoId = checkbox.dataset.memoId
document.getElementById(memoId).remove()
})
})
// 一括削除
const deleteAllMemos = document.getElementById("id-delete-all-memos")
deleteAllMemos.addEventListener("change",(event)=>{
const checkboxes = document.getElementsByClassName("class-checkbox")
// メモの数分のチェックボックスの数を数えてチェックボックスの数が0であれば何もしない。
if(checkboxes.length == 0){
return
}
Array.from(checkboxes).forEach((checkbox) => {
if(deleteAllMemos.checked == true){
checkbox.checked = true
} else {
checkbox.checked = false
}
})
})
})
// 編集のモーダルの更新ボタンのイベントハンドラー
const updateButton = document.getElementById("id-update-button")
updateButton.addEventListener("click",(event)=>{
alert("tio")
})
</script>
</html>
<input>
input要素のできること
・ユーザーからデータを受け取る。
input要素は閉じタグが要らない
・閉じタグが不要なタグを単一タグや自己完結型という。
自己完結型の具体例
<br> 改行を表すタグ。
<img> 画像を表示するためのタグ。
<link>外部スタイルシートや他のリソースを文書に関連付けるためのタグ。
<input type="hidden">
<input type="hidden">のできること
・開発者がユーザーからの送信を希望していて、ユーザーから送信されるデータをユーザーに見せたくない場合や、見せなくても良い時に使う。
<input type="text">
Q.開発者がユーザーからの送信を希望していて、ユーザーから送信されるデータをユーザーに見せたくない場合や見せなくても良い時に使うtype属性の型は何を使う？
A.<input type="text">を使う。