夏休みに入り、中学生の息子が元素記号を覚える宿題を持って帰ってきました。
せっかくなので、それをネタにjavascriptの練習をしましょう~。
宿題のプリントを見ると、118種ある元素のうち30個程度で良いみたいです。
なんとか形にして完成させてみたいです。
では、さっそくやってみましょう!
まずは元素記号と名前の配列を作りました。
"use strict"; const atomicSymbol = { symbol: [ "H", "He", "C", "N", "O", "F", . . .(以下省略) ], name: [ "水素", "ヘリウム", "炭素", "窒素", "酸素", "フッ素", . . .(以下省略) ], };
完成形のイメージは
【元素記号div】【元素名div】【テキスト入力窓】【送信ボタン】
の4つの要素を横に並べて、ひとまとまりとし
それを縦にだんだんと重ねていくイメージです。

<div class="atomic-container"> <div class="symbol" id="symbol0"></div> <div class="symbol-name" id="name0"></div> <input class="input-text" type="text" id="input0" /> <button id="btn0">決定</button> </div>
.atomic-container をcssで、display:flex;とし横並びにします。
処理については苦労したのですが
テキストを入力→決定ボタンを押す→正誤判定→正解なら元素名を表示
という流れにしました。
// ボタンと元素名を取得 for (let i = 0; i < atomicSymbol.symbol.length; i++) { const inputBtn = document.getElementById("btn" + [i]); const nameContainer = document.getElementById("name" + [i]); // 入力されたテキストを取得 inputBtn.addEventListener("click", () => { const inputText = document.getElementById("input" + [i]).value; console.log(inputText); console.log(atomicSymbol.name[i]); if (inputText === atomicSymbol.name[i]) { nameContainer.classList.add("symbol-appear"); } else { document.getElementById("input" + [i]).value = ""; } }); }

スマホでタップを意識して作ったのですが、PCで動作確認をしていると
決定ボタンをクリックする作業が非常に面倒くさいです。
できれば、エンターキーを押して入力をと思って調べたのですが
今回は実装に至りませんでした・・・。(何かそんなんばっか)
とりあえず動作はするようになりましたが
今後、時間があれば
①エンターキーで入力
②得点などの表示
などが実装できたら良いなと思っています。