タイトル通り、ドットインストールの割り勘電卓についてです。
下記のコードだと、うまく動作しないのですが、何か間違えはあるでしょうか?
宜しくお願いします。
HTML
1 2<!doctype html> 3<html lang="ja"> 4<head> 5<meta charset="utf-8"> 6<title>割り勘電卓</title> 7<style> 8 9body { 10 font-size: 16px; 11 text-align: center; 12 font-family: Arial, sans-serif; 13 14 15} 16 17h1{ 18 font-size:24px; 19} 20 21input[type="text"]{ 22padding: 7px; 23border: 1px solid #ddd; 24border-radius: 3px; 25width: 100px; 26font-weight: bold; 27font-size: 18px; 28text-align: right; 29} 30 31#btn{ 32 margin: 30px auto; 33 width: 180px; 34 border-radius: 5px; 35 box-shadow: 0 4px 0 #e91b0c; 36 background: #f44336; 37 color: #fff; 38 cursor: pointer; 39 padding: 7px; 40 41} 42 43 44#btn:hover{ 45 opacity: 0.8; 46 47} 48 49 50 51</style> 52 53</head> 54 55<body> 56 57<h1>割り勘電卓</h1> 58 59 60<p>金額 <input type="text" id="price" value="0"></p> 61<p>人数 <input type="text" id="num" value="0"></p> 62<div id="btn">計算する</div> 63<p id="result"></p> 64<script> 65(function() { 66'use strict'; 67 68 69var priceForm = document.getElementById('price'); 70var numForm = document.getElementById('num'); 71var btn = document.getElementById('btn'); 72var result = document.getElementById('result'); 73 74 75priceForm.addEventListener('click', function() { 76 this.select(); 77 78}); 79 80 81numForm.addEventListener('click', function() { 82 this.select(); 83 84}); 85 86btn.addEventListener('click', function() { 87 88 89var price = priceForm.value; 90var num = numForm.value; 91 92var x1, x2, y1, y2; 93var unit = 100; 94 95 96 97 98if (price.match(/^[1-9][0-9]*$/) && num.match(/^[1-9][0-9]*$/)) { 99//ok 100 101//result.innerHTML = 'OK!'; 102 103 104if(price % num === 0 ){ 105result.innerHTML = '一人' + (price / num) + '円ちょうどです!' ; 106 107}else{ 108 109 //result.innerHTML = 'something'; 110 111 112 113x1 = Math.floor(price / num / unit) * unit; 114y1 = price - (x1 * num); 115x2 = Math.ceil(price / num / unit) * unit; 116y2 = Math.abs(price - (x2 * num)); 117result.innerHTML = 118'一人 ' + x1 + ' 円だと ' + y1 + ' 円足りません。<br>'+ 119'一人 ' + x2 + ' 円だと ' + y2 + ' 円余ります。 '; 120 121} 122 123 124 125}else{ 126 //error 127 result.innerHTML = '入力された値に誤りがあります。' ; 128 129 130 131 } 132 133 134 135}); 136 137 138 139 140})(); 141 142 143</script> 144 145 146</body> 147</html> 148 149 150 151 152 153 154 155コード終了
このような感じで修正したのですが、宜しいでしょうか?
宜しくお願いします。
ひとますコード部分が見づらいです…!
質問入力(あるいは編集)するページに、
</> ←こんなマークのボタンがあるので、
そこ使ってコード書いてください…。それで見やすくなるので…。
回答1件
あなたの回答
tips
プレビュー