今回、電卓を作ってみようと思いました。
電卓のファイルは以下の通りです。
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>
そして、javascriptで動かしてみたいと思いやってみましたが、うまくできず、結局DOMオブジェクトの取得で終わってます。
一応のファイルです。
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が全く意味をなしていません。
分かる方がいらっしゃいましたら、ご教示お願いします。
追記:
ご回答ありがとうございます。
そして、返答が遅くなり申し訳ございません。
確かにコードが不足していました。
ご回答いただいたリンクを参考に作ってみました。
javascript
1 var kei = document.getElementById('ans'); 2 var myValue(1)= document.getElementById('one'); 3 var myValue(2) = document.getElementById('two'); 4 var myValue(3) = document.getElementById('three'); 5 var myValue(4) = document.getElementById('four'); 6 var myValue(5) = document.getElementById('five'); 7 var myValue(6) = document.getElementById('six'); 8 var myValue(7) = document.getElementById('seven'); 9 var myValue(8) = document.getElementById('eight'); 10 var myValue(9) = document.getElementById('nine'); 11 var myValue(0) = document.getElementById('zero'); 12 var myCalculate('+') = document.getElementById('plus'); 13 var myCalculate('-') = document.getElementById('minus'); 14 var myCalculate('*')= document.getElementById('mul'); 15 var myCalculate('/')= document.getElementById('div'); 16 var myCalculate('=')= document.getElementById('equ'); 17 18var myTotal = 0; // 現在の合計値 19var myInput = ""; // 現在入力している値 20var myCalc = "+"; // 合計と入力値の演算子 21var myFlg = 1; // 1回前に入力したもの 0:数字 1:演算子 22 23myValue(myData).addEventListener('click', function () { // 0~9または小数点ボタンを押した 24 myFlg = 0; // 1回前に入力したものは数値 25 kei.textContent = myInput; // 現在入力している値表示 26}); 27 28myCalculate(myData).addEventListener('click', function (){ // 演算ボタンを押した 29 if (myFlg==0){ // 1回前に入力したものは数値か? 30 myFlg = 1; // 1回前に入力したものは演算子 31 var myWork = myTotal + myCalc + myInput; // 一連の計算式を作る 32 myTotal = eval(myWork); // 計算式を計算させる 33 myInput = ""; // 現在入力している値をクリア 34 kei.textContent = myTotal; // 合計を表示 35 } 36}); 37
上記のように作りましたが、うまくいきませんでした。
もしよろしければ、ご教示お願いします。
回答1件
あなたの回答
tips
プレビュー