締切済み

javascriptで電卓を作成

2018/02/02 16:11

プログラミングをまったくやったことがない状態から、ドットインストールやテックアカデミーのHTML,CSS,Javascriptの入門動画をすべて見終わった段階ですので、基本的な仕組みと関数やfor文、if文、while文、などについてくらいは理解しています。今回、javascriptを使って電卓のシステムを組む、という課題があり、ネットで検索してやってみてはいるのですが行き詰っています。最初は以下のような形で作成をしていました。 <body> <form name="myform"> 　<table border="1"> <tr> <td colspan="4"> <input type="text" name="result" value="" id="result"> </td> </tr> <tr> <td><input type="button" value="　"onclick="calc(' ')" ></td> <td><input type="button" value="％"onclick="calc('%')"></td> <td colspan="2"> <input type="button" value="AC" onclick="calc('AC')"></td> </tr> <tr> <td><input type="button" value="７" onclick="calc('７')"></td> <td><input type="button" value="８" onclick="calc('８')"></td> <td><input type="button" value="９" onclick="calc('９')"></td> <td><input type="button" value="÷" onclick="calc('÷')"></td> </tr> <tr> <td><input type="button" value="４"onclick="calc('４')" ></td> <td><input type="button" value="５"onclick="calc('５')" ></td> <td><input type="button" value="６"onclick="calc('６')"></td> <td><input type="button" value="×" onclick="calc('×')"></td> </tr> 　 <tr> <td><input type="button" value="１" onclick="calc('１')" ></td> <td><input type="button" value="２" onclick="calc('２')"></td> <td><input type="button" value="３" onclick="calc('３')"></td> <td><input type="button" value="－" onclick="calc('－')"></td> </tr> <tr> <td><input type="button" value="０" onclick="calc('０')" ></td> <td><input type="button" value="＋" onclick="calc('＋')"></td> <td colspan="2"> <input type="button" value="＝" onclick="calc('＝')"></td> </tr> </form> <script> function calc(a) { if (a === "=") { document.myform.kekka.value = eval(document.myform.kekka.value); } else if (a === "AC") { document.myform.kekka.value = ""; } else { document.myform.kekka.value += a; } </script> </body> </html> ですが、onclickとevalを使わず、代わりに「addEventListner」を用いるよう指示されました。「addEventListner」に関しては、検索してなんとかざっと理解したのですが、それ以前に、電卓の基本的な関数の組み方を理解していないため、いまいちどこから手をつけたらいいかわかりません。いろんなサイトを見ているといろんなやり方がでてきますが、ope=+,やflag=0などの表記をよく見かけます。が、この意味もいまいちわかっていません。。初心者すぎるので、何かアドバイスをいただけますと幸いです。宜しくお願いいたします。また、このような初心者が使いこなせるようになるために向いている動画や書籍、ページがありましたら教えていただけますと助かります。

apoaporo
お礼率19% (4/21)

JavaScript
回答数2
ありがとう数0

みんなの回答 （2）
専門家の回答

みんなの回答

ballville
ベストアンサー率47% (233/487)

2018/02/18 09:20 回答No.2

codepenにソースを貼っておきましたので、理解できるまで、あれこれいじくり回してください。 addEventListenerは６４行目のsetKey関数で使用しました。ただ、電卓のボタンというものは、キー入力以外の機能はないはずなので、onclick属性を指定するほうが正しいような気がします。計算はevalを使わずキーを押すごとに行っています。

参考URL：: https://codepen.io/anon/pen/YeYjLO

ログインすると、全ての回答が全文表示されます。

babu_baboo
ベストアンサー率51% (268/525)

2018/02/02 16:28 回答No.1

input要素についている onclick="..." は、外す。試してないけど、こんな感じ？ // element.tagName === 'INPUT' を付けようか？ function handleEvent (event) { 　let element = event.target; 　if ('button' === element.type) { 　　swicth (element.value) { 　　case 1 : case '1' : 　　　break; 　　} 　　console.log (element.value); 　} } document.addEventListener ('click', handleEvent, false);

ログインすると、全ての回答が全文表示されます。