jsで電卓を作りたい

初心者ですが、電卓を作りたいです。
デザインは作ったのですが、手本のサイトを見てやってみているのですが動きません。
要素の名前の取得が間違っているとか、よくわからないところが多くあるので
教えてください。

ひとまずボタンを押すとテキストエリアに表示されるようにしたいのですが、どこがおかしいのか
よくわからない状態です…

最終的には電卓として使えられれば問題無いです。
よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>*</title>
6    <link rel="stylesheet" href="style.css">
7  </head>
8
9  <body>
10    <div class="back">
11      <textarea id="monitor"></textarea>
12
13      <div class="number_button">
14
15        <div class="one_floor">
16        <input id="b0" type="button" value="0" onclick="myValue(0)">
17        <input id="b1" type="button" value="1" onclick="myValue(1)">
18        <input id="b2" type="button" value="2" onclick="myValue(2)">
19        <input id="b3" type="button" value="3" onclick="myValue(3)">
20      </div>
21
22      <div class="two_floor">
23        <input id="b4" type="button" value="4" onclick="myValue(4)">
24        <input id="b5" type="button" value="5" onclick="myValue(5)">
25        <input id="b6" type="button" value="6" onclick="myValue(6)">
26        <input id="b7" type="button" value="7" onclick="myValue(7)">
27      </div>
28
29      <div class="thr_floor">
30        <input id="b8" type="button" value="8" onclick="myValue(8)">
31        <input id="b9" type="button" value="9" onclick="myValue(9)">
32        <input id="b10" type="button" value="+" onclick="myCalculate('+')">
33        <input id="b11" type="button" value="-" onclick="myCalculate('-')">
34      </div>
35
36      <div class="fo_floor">
37        <input id="b12" type="button" value="*" onclick="myCalculate('*')">
38        <input id="b13" type="button" value="/" onclick="myCalculate('/')">
39        <input id="b14" type="button" value="=" onclick="myCalculate('=')">
40      </div>
41
42      <div class="fif_floor">
43        <input id="b15" type="button" value="C" onclick="myC()">
44      </div>
45
46      </div>
47
48      <div class="exp">
49      <p>Please put in number</p>
50      <p>This is the calucuration.</p>
51    </div>
52
53    </div>
54    <script src="cal.js"></script>
55  </body>
56
57</html>
58

CSS
1.back{
2  background: #aaaab0;
3  height:900px;
4  width:500px;
5  margin-top: 50px;
6  margin-left: 300px;
7}
8
9#monitor{
10  height:80px;
11  width:400px;
12  margin-left: 45px;
13  margin-right: 45px;
14  margin-top: 10px;
15  font-size: 60px;
16  font-weight: bold;
17  text-align: right;
18  padding-top: 10px;
19}
20
21.one_floor,.two_floor,.thr_floor,.fo_floor{
22  margin-top: 10px;
23  display:block;
24  float:left;
25
26}
27
28.fif_floor{
29  margin-top: 10px;
30  display:block;
31  float:left;
32}
33
34
35#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7,#b8,#b9,#b10,#b11,#b12,#b13,#b14{
36  height:100px;
37  width:100px;
38  text-align: center;
39  font-size: 60px;
40  background: #fcc800;
41  margin: 10px;
42  float:left;
43
44}
45
46#b15{
47  height:100px;
48  width:300px;
49  text-align: center;
50  font-size: 60px;
51  background: #fcc800;
52  margin: 10px;
53  float:left;
54}
55
56
57.exp{
58  font-size: 20px;
59  float:left;
60  font-weight: bold;
61  text-align: center;
62}
63

javascript
1(function(){
2  'use strict';
3
4  let myInput="";
5  let myTotal=0;
6  let myCalc="+";
7  let myFlg=1; //0:数字 1:演算子
8
9  //数値を入力した時のルーチン
10  //演算処理のルーチン
11  //myValue()
12  //myCalculate()
13
14  function myValue(myData){
15      myFlg=0; //1回前に入力したのは数値
16      myInput+=myData;　//現在入力している値に追加
17      document.getElementById('monitor').value=myInput;　//現在入力している値を表示
18  }
19
20  function myCalculate(myData){
21    if(myflg===0){
22        myFlg=1;
23        myWork=myTotal+myCalc+myInput;
24        myTotal=eval(myWork);
25        myInput = "";	// 現在入力している値をクリア
26        document.getElementById('monitor').value = myTotal;	// 合計を表示
27        }
28        if (myData == "="){	// 演算ボタンは[＝]か？
29        myTotal = 0;	// 合計をクリア
30        myCalc = "+";	// 演算子を[+]とする
31        }else{	// 演算ボタンは[＝]以外である
32        myCalc = myData;	// 演算子を退避させておく
33        }
34
35    }
36
37    function myC(){	// クリアボタン[C]を押した
38      myTotal = 0;	// 合計クリア
39      myCalc = "+";	// 演算子クリア
40      myInput = "";	// 現在入力している値をクリア
41      document.getElementById('monitor').value = myTotal;	// つまり、０を表示
42      }
43
44
45})();
46

行動規範の内容に同意します

回答1件

ベストアンサー

ひとまずボタンを押すとテキストエリアに表示されるようにしたいのですが

とりあえず以下で囲んである部分を取り除き、囲まない形にしますか。
そしたら、入力した数字は出てくるはずです。

javascript
1(function(){
2	'use strict';
3	...
4})();
5

投稿2018/04/17 14:52

kszk311

総合スコア3404

nonnon8.

2018/04/18 10:44

ありがとうございます！ 'use strict'=厳格に？全体をfunction(){}で囲む理由がよくわかりませんが教えてもらえないでしょうか？ 'use strict'はなんの制限となっているのでしょうか

kszk311

2018/04/18 15:50

'use strict'は厳格モードで、的確なエラーチェックができる。 http://analogic.jp/use-strict/ (function(){ ... })();とすることで、スコープが作成される（今回の場合は、グローバルでアクセスできる位置に変数を置かなければならない） http://analogic.jp/immediate-function/ と言ったところでしょうか。

nonnon8.

2018/04/19 13:24

ありがとうございます＾＾

行動規範の内容に同意します