質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

2401閲覧

ドットインストールの割り勘電卓について

piyotaka

総合スコア39

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2015/10/05 05:38

編集2015/10/05 07:53

タイトル通り、ドットインストールの割り勘電卓についてです。

下記のコードだと、うまく動作しないのですが、何か間違えはあるでしょうか?

宜しくお願いします。

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コード終了

このような感じで修正したのですが、宜しいでしょうか?

宜しくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

u_sa9n

2015/10/05 07:19 編集

ひとますコード部分が見づらいです…! 質問入力(あるいは編集)するページに、 </> ←こんなマークのボタンがあるので、 そこ使ってコード書いてください…。それで見やすくなるので…。
guest

回答1

0

ベストアンサー

'一人 ' + x2 + ' 円だと ' + y2 + ' 円余ります。 ';
の最後のセミコロンが全角なのでエラーになっているのではないでしょうか。

投稿2015/10/05 08:16

notable

総合スコア415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

piyotaka

2015/10/05 08:23

解決しました。セミコロンが原因でした。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問