初めに
今回は商品の管理プログラムみたいなものを作っていきます。
ファイル構成
今回もhtmlファイル1つでできます。
プログラムのコピペ
以下のコードをコピペしてください。
main.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品管理プログラム</title>
<style>
header h2 {
font-weight: normal; /* 正しいフォントの太さを指定 */
}
header {
height: 100px;
width: 100%;
background-color: rgb(53, 52, 52);
color: white;
display: flex;
flex-direction: column;
align-items: center; /* テキストを中央揃え */
justify-content: center; /* テキストを中央揃え */
}
footer {
height: 200px;
width: 100%;
background-color: rgb(53, 52, 52);
color: white;
display: flex;
align-items: center; /* テキストを中央揃え */
justify-content: center; /* テキストを中央揃え */
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center; /* 中央揃え */
justify-content: center; /* 中央揃え */
text-align: center;
margin: 0; /* マージンをリセット */
font-family: Arial, sans-serif;
}
input[type="text"],
input[type="number"] {
height: 30px;
width: 300px;
border: 1px solid black;
margin-bottom: 10px;
}
button {
height: 30px;
width: 300px;
background-color: rgb(52, 253, 69);
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: rgb(38, 201, 51);
}
.container {
height: 500px;
border: 1px solid black;
width: 100%;
overflow-y: scroll;
margin-top: 20px;
resize: both;
}
</style>
</head>
<body>
<header>
<h2>商品管理プログラム</h2>
</header>
<main>
<p>商品を管理できるプログラム(リロードするとデータが消えます)</p>
<select onchange="changediv()" id="changeselect">
<option value="add">商品を追加</option>
<option value="remove">商品を削除</option>
</select>
<div id="add">
<p>商品名を入力</p>
<input type="text" id="shouhinmei">
<p>個数を入力</p>
<input type="number" id="quantity">
<p>商品タグを入力</p>
<input type="text" id="contenttag">
<p>内容を確認して追加</p>
<button onclick="addByclass()">商品を追加</button>
</div>
<div id="remove" hidden>
<p>削除する商品idの番号を入力</p>
<input type="text" id="removeid">
<p>ロボットでないことを確認するため'delete'と入力してください</p>
<input type="text" id="verify_for_notRobot">
<p>削除する商品を確認して削除</p>
<button onclick="removeElement()">削除</button>
</div>
<div class="container" id="container"></div>
</main>
<footer>
<!--ここにユーザー名などを書く 例:©2024 created by qqn5192-->
</footer>
<script>
let i = 0;
let d = document;
let container = d.getElementById("container");
let gname = d.getElementById('shouhinmei');
let quantity = d.getElementById('quantity');
let tags = d.getElementById('contenttag');
let removeid = d.getElementById('removeid');
let removeverify = d.getElementById('verify_for_notRobot');
let changeselect = d.getElementById('changeselect');
let d_add = d.getElementById('add');
let d_remove = d.getElementById('remove');
function addToContent() {
if(gname.value && quantity.value && tags.value){
let contentProperties = {
name: gname.value,
gquantity: quantity.value,
gtag: tags.value
};
return contentProperties;
} else {
alert("商品名、個数、商品タグのどれかが入力されていません。");
return null;
}
}
function addByclass() {
let goodsInfo = addToContent();
if (!goodsInfo) return;
let appendElement = d.createElement('p');
i++;
appendElement.id = "id" + i;
appendElement.textContent = "商品名:" + goodsInfo.name + " 個数:" + goodsInfo.gquantity + " タグ:" + goodsInfo.gtag + " 商品id:" + appendElement.id;
container.appendChild(appendElement);
}
function removeElement() {
let idToRemove = removeid.value.trim();
let verification = removeverify.value.trim();
if (idToRemove && verification === 'delete') {
let elementToRemove = d.getElementById(idToRemove);
if (elementToRemove) {
elementToRemove.remove();
} else {
alert("指定されたIDの商品が見つかりません。");
}
} else {
alert("削除する商品IDと確認文字列を正しく入力してください。");
}
removeid.value = "";
removeverify.value = "";
}
function changediv() {
if (changeselect.value === "add") {
d_add.hidden = false;
d_remove.hidden = true;
} else if (changeselect.value === "remove") {
d_add.hidden = true;
d_remove.hidden = false;
}
}
window.onload = changediv;
</script>
</body>
</html>
このプログラムは、商品の追加と削除に対応しています（サーバーと連携してないのでページを再読み込みするとデータが消えます。）
最後に
みなさん、いかがだったでしょうか。今回はhtmlで商品の管理プログラムのようなものを書きました。ちなみに今回もjavascriptの修正をGPTにやってもらいました。
それではまたお会いしましょう！