投稿2016/11/07 10:42
編集2016/11/09 09:16質問があります。
電卓を作成しています(まだ途中です）。
電卓のファイルは以下の通りです。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf8"> 5 <title>電卓</title> 6 </head> 7 <body> 8 電卓 9 <p> 10 <input id="ans" size="20" readonly></input><br> 11 <button id="one" > 1 </button> 12 <button id="two" > 2 </button> 13 <button id="three" > 3 </button> 14 <button id="four" > 4 </button> 15 <button id="five" > 5 </button><br> 16 <button id="six" > 6 </button> 17 <button id="seven"> 7 </button> 18 <button id="eight"> 8 </button> 19 <button id="nine"> 9 </button> 20 <button id="zero"> 0 </button><br> 21 <button id="plus"> + </button> 22 <button id="minus"> - </button> 23 <button id="mul"> * </button> 24 <button id="div" > / </button> 25 <button id="equ"> = </button> 26 27 </p> 28<script src="dentaku.js"></script> 29 </body> 30</html>
HTMLの実行結果です。
そして、javascriptのファイルです。
javascript
1 var kotae = document.getElementById('ans'); 2 var iti = document.getElementById('one'); 3 var ni = document.getElementById('two'); 4 var san = document.getElementById('three'); 5 var yon = document.getElementById('four'); 6 var go = document.getElementById('five'); 7 var roku = document.getElementById('six'); 8 var nana = document.getElementById('seven'); 9 var hati = document.getElementById('eight'); 10 var kyu = document.getElementById('nine'); 11 var zyu = document.getElementById('zero'); 12 var tasu = document.getElementById('plus'); 13 var hiku = document.getElementById('minus'); 14 var kakeru = document.getElementById('mul'); 15 var waru = document.getElementById('div'); 16 var ikoru = document.getElementById('equ');
javascriptはDOMの取得で終わっています。
これから、例えば、1の数字のボタンを押したら、テキストボックスに1を表示したい場合、
javascript
1 2iti.onclick = click1; 3function click1(){ 4 kotae.textContent = '1'; 5 }
のようにやるのかと考え、htmlを開いてみたら、押しても反応しませんでした。このような方法では、テキストボックス上に表示できないのでしょうか？
また、このようなイベントハンドラを設定する際に、19の数字一つ一つ繰り返し入力しなければならないのでしょうか？19の数字全てに共通するイベントハンドラ(1~9の数字をクリックしたら、テキストボックス上にその数字を表示）を作成できないのかが知りたかったため、質問させていただきます。
まずは1桁の計算ができるようになりたいので、12とか32などの数字が入力されることは考えていません。
分かる方がいらっしゃいましたら、ご教示お願いします。
javascript
1var kotae = document.getElementById('ans'); 2 var zeroToNine = ["zero", "one", "two", "three", "four", 3 "five", "six", "seven", "eight", "nine"]; 4 var digitElements = new Array(10); 5 var tasu = document.getElementById('plus'); 6 var hiku = document.getElementById('minus'); 7 var kakeru = document.getElementById('mul'); 8 var waru = document.getElementById('div'); 9 var ikoru = document.getElementById('equ'); 10 11 for (var i = 0; i <= 9; i++) { 12 digitElements[i] = document.getElementById(zeroToNine[i]); 13 digitElements[i].onclick = function() { 14 // アラビア数字に変換 15 var digit = zeroToNine.indexOf(this.id) + ''; 16 kotae.value = digit; //一つ目の数値 17 }; 18 } 19 for (var i = 0; i <= 9; i++) { 20 digitElements[i] = document.getElementById(zeroToNine[i]); 21 digitElements[i].onclick = function() { 22 // アラビア数字に変換 23 var digit2 = zeroToNine.indexOf(this.id) + ''; 24 kotae.value = digit2; //２つ目の数値 25 }; 26 } 27
回答5件
0
許可された内容 なし。これは空要素です。
タグの省略 開始タグは必須。終了タグを記述してはならない。
input 要素 - HTML | MDN
textContentではなくて、valueを操作してみてください。
投稿2016/11/07 11:48
総合スコア36987
0
ベストアンサー
趣味で作ってみましたが、考えるべき点がかなりある為、初心者が始める課題としては難易度が高いように感じました(GitHubのリンク先のコメント欄にjsfiddleのサンプルがありますので簡易的に実行したい場合はそちらからどうぞ)。
以降、基本的な部分、躓きやすい部分を解説しますが、理解が難しいと感じるようであれば、現在の「電卓を作る」という課題は保留してJavaScriptの基礎勉強から始める事をお勧めします。
「一切htmlには手を加えず」という事ですが、質問文にあるHTMLをそのまま利用する形ですと電卓によくある [C] キーがない為、計算ミスしたらページを再読み込みするまで演算結果をクリア出来ないという問題があります。
何にでもいえる事ですが、まずは小さな事から始めましょう。
HTML文書上に出力するというのは置いておき、次のような算術式の文字列を与えて演算結果を返す汎用的な関数を作成してみましょう。
JavaScript
1calc('1 + 3 * 4'); // 13 2calc('-3 * 2'); // -6 3calc('10 / 2 + 4'); // 9
上の calc() 関数を作るのが難しいと感じるようであれば、calc('1 + 2') のような単純な式から解析できるようにして徐々に難しい式を解析できるように発展させてみましょう。
おそらく、関数 calc() を作る上でこれが最も難しいと思われる部分です。次の計算式の演算結果を考えてみて下さい。
JavaScript
12 * 3 + 5 * 6
算数上の答えは「36」です。
* は + よりも優先順位が高い為、先に掛け算で演算してから加算を実行します。
掛け算を優先して処理をするというのが曲者で何も考えずに作ると次のようにコーディングしたくなるでしょう。
JavaScript
1((2 * 3) + 5) * 6
演算結果は「66」ですが、正しい答えではありません。
これを解決する為には算術式から「掛け算」「割り算」を優先して見つけて先に処理する必要があります。
手法としては次の2通りが考えられます。
Q&AString.prototype.replace で第二引数のコールバック関数を指定するRegExp.prototype.exec で算術式文字列をマッチさせた後に置換し、マッチしなくなるまで続ける参考までに、私が先のコードで採用したのは 1. です。
要素ノードを一つ一つ指定する手間を省きたいようですが、そういう場合は「親要素(もしくは祖先要素)」に対して click イベントを割り当て、event.target でクリックされた要素を参照して判定する方法がお勧めです。
初めにも書きましたが、初心者が始める課題としては難易度が高いと思います。
今までに解説した内容の理解が困難であれば、MDNのチュートリアルから初めてDOMの基礎的な部分も学ぶ流れが良いと思います。
<form id="calc-form"> から <form class="calc-form"> に変更し、複数設置できるようにした0.6*3 === 1.8」と計算できるようにした(IEEE754の丸め誤差対策)Re: ojgtmaga さん
投稿2016/11/08 08:53
編集2016/11/11 05:14
総合スコア18189
0
「一切htmlには手を加えず」という縛りなので + - * / = は表示するための場所が無かったから非表示。
JavaScript
1let o = { v1: [], v2: [], f: null }, func, ans = document.getElementById( 'ans' ); 2ans.value = 0; 3func = ( v1, f, v2 ) => { 4 let res; 5 v1 = parseInt( v1, 10 ); 6 v2 = parseInt( v2, 10 ); 7 8 if ( '+' === f ) { 9 return v1 + v2; 10 } else if ( '-' === f ) { 11 return v1 - v2; 12 } else if ( '*' === f ) { 13 return v1 * v2; 14 } else if ( '/' === f ) { 15 if ( v2 === 0 ) { 16 return '/0 error'; 17 } 18 return v1 / v2; 19 } 20}; 21[].forEach.call( document.getElementsByTagName( 'button' ), n => { 22 n.addEventListener( 'click', e => { 23 let t = n.textContent.trim(), v, res; 24 if ( parseInt( t, 10 ) >= 0 ) { 25 v = ( !o.f ) ? o.v1 : o.v2; 26 v.push( t ); 27 ans.value = v.join( '' ); 28 } else { 29 if ( o.f && o.v1.length && o.v2.length ) { 30 res = func( o.v1.join( '' ), o.f, o.v2.join( '' ) ); 31 o.v1 = []; 32 o.v2 = []; 33 o.f = null; 34 if ( typeof res === 'string' ) { 35 alert( res ); 36 ans.value = 0; 37 return; 38 } 39 ans.value = res; 40 } 41 if ( '=' !== t ) { 42 if ( o.v1.length === 0 ) { 43 o.v1 = ( ans.value + '' ).split( '' ); 44 } 45 o.f = t; 46 } 47 } 48 }, false ); 49} ); 50```**動くサンプル：**[https://jsfiddle.net/yxmaLL2c/](https://jsfiddle.net/yxmaLL2c/)
投稿2016/11/07 17:44
総合スコア69608
0
前質問の回答でもあった イヌでもわかるJavaScript講座 - 電卓
ここらへんは見ましたでしょうか？
投稿2016/11/07 12:42
総合スコア2050
0
HTML
1 <input id="ans" size="20" readonly></input><br> 2 <button name="digit" value="1" id="1" > 1 </button> 3 <button name="digit" value="2" id="2" > 2 </button> 4 <button name="digit" value="3" id="3" > 3 </button> 5 <button name="digit" value="4" id="4" > 4 </button> 6 <button name="digit" value="5" id="5" > 5 </button><br> 7 <button name="digit" value="6" id="6" > 6 </button> 8 <button name="digit" value="7" id="7"> 7 </button> 9 <button name="digit" value="8" id="8"> 8 </button> 10 <button name="digit" value="9" id="9"> 9 </button> 11 <button name="digit" value="0" id="0"> 0 </button><br> 12 <button id="plus"> + </button> 13 <button id="minus"> - </button> 14 <button id="mul"> * </button> 15 <button id="div" > / </button> 16 <button id="equ"> = </button>
JavaScript
1 var kotae = document.getElementById('ans'); 2 var digits = document.getElementsByName('digit'); // 配列になる 3 var tasu = document.getElementById('plus'); 4 var hiku = document.getElementById('minus'); 5 var kakeru = document.getElementById('mul'); 6 var waru = document.getElementById('div'); 7 var ikoru = document.getElementById('equ'); 8 9 for (var i = 0; i <= 9; i++) { 10 digits[i].onclick = function() { 11 kotae.value += this.value; 12 }; 13 }
数字のキーはこのようにすると、コードを短縮でき、間違えにくくなります。
2桁以上にも対応しています。
これでどうですか。
JavaScript
1 var kotae = document.getElementById('ans'); 2 var zeroToNine = ["zero", "one", "two", "three", "four", 3 "five", "six", "seven", "eight", "nine"]; 4 var digitElements = new Array(10); 5 var tasu = document.getElementById('plus'); 6 var hiku = document.getElementById('minus'); 7 var kakeru = document.getElementById('mul'); 8 var waru = document.getElementById('div'); 9 var ikoru = document.getElementById('equ'); 10 11 for (var i = 0; i <= 9; i++) { 12 digitElements[i] = document.getElementById(zeroToNine[i]); 13 digitElements[i].onclick = function() { 14 // アラビア数字に変換 15 var digit = zeroToNine.indexOf(this.id) + ''; 16 kotae.value += digit; 17 }; 18 }
私の答えはこうです。よくある状態遷移です。
[AC]ボタンはご自身で実装してみてください。
JavaScript
1 var kotae = document.getElementById('ans'); 2 3 var zeroToNine = ["zero", "one", "two", "three", "four", 4 "five", "six", "seven", "eight", "nine"]; 5 var digitButtons = new Array(10); 6 7 // 演算子ボタン 8 var operators = ["plus", "minus", "mul", "div"]; 9 var operatorButtons = new Array(operators.length); 10 11 var calculatingButton = document.getElementById('equ'); 12 13 // 状態定数 14 var STATE = { 15 INITIAL : 0, 16 DIGIT_BUTTON_PRESSED_AT_FIRST : 1, 17 OPERATOR_BUTTON_PRESSED : 2, 18 DIGIT_BUTTON_PRESSED_AT_SECOND : 3, 19 CALCULATING_BUTTON_PRESSED : 4 20 }; 21 // 状態変数 22 var state = STATE.INITIAL; 23 24 // 数値記憶用 25 var memory = 0; 26 // 押された演算子 27 var pressedOperator = ''; 28 29 for (var i = 0; i <= 9; i++) { 30 digitButtons[i] = document.getElementById(zeroToNine[i]); 31 digitButtons[i].onclick = function() { 32 // アラビア数字に変換 33 var digit = zeroToNine.indexOf(this.id) + ''; 34 35 switch (state) { 36 case STATE.INITIAL: 37 case STATE.DIGIT_BUTTON_PRESSED_AT_FIRST: 38 kotae.value += digit; 39 state = STATE.DIGIT_BUTTON_PRESSED_AT_FIRST; 40 break; 41 42 case STATE.OPERATOR_BUTTON_PRESSED: 43 kotae.value = ''; 44 // noBreak; 45 case STATE.DIGIT_BUTTON_PRESSED_AT_SECOND: 46 kotae.value += digit; 47 state = STATE.DIGIT_BUTTON_PRESSED_AT_SECOND; 48 break; 49 50 } 51 }; 52 } 53 54 for (i = 0; i < operatorButtons.length; i++) { 55 operatorButtons[i] = document.getElementById(operators[i]); 56 operatorButtons[i].onclick = function() { 57 switch (state) { 58 case STATE.DIGIT_BUTTON_PRESSED_AT_FIRST: 59 case STATE.CALCULATING_BUTTON_PRESSED: 60 pressedOperator = this.id; 61 memory = parseInt(kotae.value, 10); 62 state = STATE.OPERATOR_BUTTON_PRESSED; 63 break; 64 } 65 }; 66 } 67 68 calculatingButton.onclick = function() { 69 if (state === STATE.DIGIT_BUTTON_PRESSED_AT_SECOND) { 70 var operand = parseInt(kotae.value, 10); 71 72 switch (pressedOperator) { 73 case "plus": 74 kotae.value = memory + operand; 75 break; 76 77 case "minus": 78 kotae.value = memory - operand; 79 break; 80 81 case "mul": 82 kotae.value = memory * operand; 83 break; 84 85 case "div": 86 kotae.value = memory / operand; 87 break; 88 89 } 90 91 state = STATE.CALCULATING_BUTTON_PRESSED; 92 } 93 };
投稿2016/11/07 12:33
編集2016/11/10 13:45
総合スコア1105
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/07 12:21
2016/11/07 12:35
2016/11/07 13:40
2016/11/08 00:39