炊飯計算アプリ
水とお米の合計重量(g):
以下が実際のプログラムです。 ```html <!DOCTYPE html> <html> <head> <title>炊飯計算アプリ</title> <meta charset="utf-8"> <script> //テンキーの数字をボタンから取得してinput要素に挿入する関数 function insertNumber(num) { const input = document.getElementById("numInput"); input.value += num; } //テンキーのクリアボタンを押したときにinput要素の値をクリアする関数 function clearInput() { const input = document.getElementById("numInput"); input.value = ""; } //計算を実行して結果を表示する関数 function calculate() { const kamaWeightInput = document.getElementById("kamaWeight"); const riceWeightInput = document.getElementById("riceWeight"); const totalWeightSpan = document.getElementById("totalWeight"); //入力値が正の数値かチェック if (kamaWeightInput.value > 0 && riceWeightInput.value > 0) { //計算 const totalWeight = riceWeightInput.value * 1.2 + parseInt(riceWeightInput.value); totalWeightSpan.textContent = totalWeight + "g"; //ジョークの挿入 const jokeSpan = document.getElementById("joke"); if (totalWeight > 5000) { jokeSpan.textContent = "あら。ごはんが凄く多いですね。食べきれるかしら?"; } else { jokeSpan.textContent = "ちょうどいい分量ですね。おいしく炊けますように。"; } } else { alert("釜の重さとお米の重さは正の数値で入力してください。"); } } </script> </head> <body> <h1>炊飯計算アプリ</h1> <label for="kamaWeight">釜の重さ(g):</label> <input type="number" id="kamaWeight" placeholder="釜の重さを入力"> <br> <label for="riceWeight">お米の重さ(g):</label> <input type="number" id="riceWeight" placeholder="お米の重さを入力"> <br> <!-- テンキーのボタン --> <button onclick="insertNumber(1)">1</button> <button onclick="insertNumber(2)">2</button> <button onclick="insertNumber(3)">3</button> <br> <button onclick="insertNumber(4)">4</button> <button onclick="insertNumber(5)">5</button> <button onclick="insertNumber(6)">6</button> <br> <button onclick="insertNumber(7)">7</button> <button onclick="insertNumber(8)">8</button> <button onclick="insertNumber(9)">9</button> <br> <button onclick="clearInput()">クリア</button> <button onclick="insertNumber(0)">0</button> <button onclick="calculate()">計算</button> <br> <!-- テンキーから入力された値を表示するインプット要素 --> <input type="text" id="numInput" placeholder="テンキーから値を入力"> <br> <!-- 計算結果を表示するspan要素 --> <span>水とお米の合計重量(g):</span> <span id="totalWeight"></span> <br> <!-- ジョークを表示するspan要素 --> <span id="joke"></span> </body> </html> ``` このアプリは、3つの入力欄とテンキーの数字ボタン、クリアボタン、計算ボタンから構成されます。テンキーからの値入力は、数字ボタンを押してinput要素に値を挿入することで実現されます。クリアボタンを押すと、input要素の値がクリアされます。計算ボタンを押すと、入力した釜の重さとお米の重さを元に計算を実行し、水とお米の合計重量を表示します。計算後、ジョークが表示されます。 このアプリは、JavaScriptでevalを使ったり、他のサイトに遷移させたり、リダイレクトさせたり、alertを使ったりすることはありません。セキュリティ上の脆弱性はありません。