おはこんばんちわ。
気付いたら厄過ぎてた、プログラミング初学者のオジサンです。
現在、JavaScriptでミニアプリを作成しています。
そのアプリでは、クリックするとそのボタンのvalue属性を変更させる機能があります。
今回はボタンをクリックすると、「O」が「X」に、「X」が「O」に変わるコードを作ってみました。
1.HTML（index.html）
今回はボタンをDOMで作ります。
そのため、bodyタグの中にはJavaScriptを呼び出すscriptタグしかありません。
このようなコードばっかり書いてたおかげか、だいぶDOMを理解できるようになりました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>クリックしたボタンのvalueを変える</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script src="js/main.js"></script>
</body>
</html>
2.CSS（css/styles.css）
なくてもいいのですが、テストするときの見やすさが欲しいので、少しボタンの体裁を整えました。
/* ボタンの体裁を整える */
input {
display: flex;
margin: 10px;
}
3.JavaScript（js/main.js）
最初のパラグラフはDOMでinputタグを作ってます。
createElement()でinputタグを作り、setAttribute()でtype属性とvalue属性を付け、最後にappendChild()でbodyタグの子要素に入れてます。これをfor文で4回繰り返し。
なお、初期設定としてボタンは「O」にしています。
// Aボタンを４つ作り、bodyタグの子要素に入れます
for (let i = 0; i < 4; i++) {
const input = document.createElement('input');
input.setAttribute('type','button');
input.setAttribute('value','O');
document.body.appendChild(input);
}
次のパラグラフでボタンを変えるコードを書いてます。
まず、querySelectorAll()を使って、inputのNodeListを取得します。
そしてfor文を使って、クリックされたNodeを探すaddEventListenerを入れました。
その後、if文でクリックされたNodeのvalue属性によってボタンを切り替えるコードを書いています。
// ボタンがAならBに、BならAならにします
const input = document.querySelectorAll('input');
for (let i = 0; i < input.length; i++) {
input[i].addEventListener('click', ()=> {
if (input[i].value == 'O') {
input[i].value = 'X';
} else {
input[i].value = 'O';
}
});
}
4.最後に
うまくコードの説明ができていないところがあるかもしれないので、後で見直そうと思います。
もし、分かりにくいところがありましたら、ご指摘いただきますと助かります。
拙文に最後までお目通しいただき、ありがとうございました！