ユーザーから入力された数値を小銭に両替するプログラムを書いているのですが、calculateボタンを押してもそれぞれの値のテキストボックスに反映されません。
そもそも反映がされていないので関数ではなくjsファイルの冒頭部分が個人的におかしいと思うのですが、どこが間違っているかわからないので教えてほしいです。
よろしくお願いします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>calculator</title> 7</head> 8<body> 9 <main> 10 <h1>両替</h1> 11 <label>数字を入力してください</label> 12 <input type="text" id="yen"> 13 <input type="button" value="calculate" id="calculate"> 14 <br><br> 15 <div>500円: <input type="text" id="fiveHundred" disabled></div> 16 <div>100円: <input type="text" id="oneHundred" disabled></div> 17 <div>50円: <input type="text" id="fifty" disabled></div> 18 <div>10円: <input type="text" id="ten" disabled></div> 19 <div>5円: <input type="text" id="five" disabled></div> 20 <div>1円: <input type="text" id="one" disabled></div> 21 <script src="calculator.js"></script> 22 </main> 23</body> 24</html>
Javascript
1const $ = selector => document.querySelector(selector); 2 3document.addEventListener("DOMContentLoaded", () => { 4 $("#calculate").addEventListener("click", evt => { 5 entry(); 6 }); 7}); 8 9const entry = function() { 10 var userInput = parseInt($("yen").value); 11 if (userInput > 9999) { 12 alert("0-9999 の値を入力してください"); 13 } else if (userInput < 0) { 14 alert("0-9999 の値を入力してください"); 15 } else { 16 change(userInput); 17 } 18}; 19 20 21const change = function(yen) { 22 var fiveHundred = 0, oneHundred = 0, fifty = 0, ten = 0, five = 0, one = 0; 23 if (yen >= 500) { 24 fiveHundred = parseInt(yen / 500); 25 yen %= 500; 26 $("fiveHundred").value = fiveHundred; 27 $("fiveHundred").disabled = true; 28 } 29 if (yen >= 100) { 30 oneHundred = parseInt(yen / 100); 31 yen %= 100; 32 $("oneHundred").value = oneHundred; 33 $("oneHundred").disabled = true; 34 } 35 if (yen >= 50) { 36 fifty = parseInt(yen / 50); 37 yen %= 50; 38 $("fifty").value = fifty; 39 $("fifty").disabled = true; 40 } 41 if (yen >= 10) { 42 ten = parseInt(yen / 10); 43 yen %= 10; 44 $("ten").value = ten; 45 $("ten").disabled = true; 46 } 47 if (yen >= 5) { 48 five = parseInt(yen / 5); 49 yen %= 5; 50 $("five").value = five; 51 $("five").disabled = true; 52 } 53 if (yen >= 1) { 54 one = parseInt(yen / 1); 55 yen %= 1; 56 $("one").value = one; 57 $("one").disabled = true; 58 } 59};
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/07/26 17:42