JavaScript(+HTML)で電卓を作ろうと思ってますが、早速つまづきました。

###前提・実現したいこと
プログラミング????です。
JavaScriptで簡単な電卓を作ろうとしています。
二つの入力フォームに数字を入れ、演算子を入力し、[算出]ボタンを押すと一番右のボックスに答えがでるというものです。

###発生している問題・エラーメッセージ

SyntaxError: missing ; before statement  Dentaku.htm:20:8

このようなエラーが出ますが、どこが間違っているのでしょうか。
###該当のソースコード

JavaScript
1<!DOCTYPE html>
2<meta charset="UTF-8">
3
4<html>
5    <body>
6        <input type="text" id='hidari' size="7"></input>
7
8      
9        <select id="enzan">
10            <option value=1>+</option>
11            <option value=2>-</option>
12            <option value=3>×</option>
13            <option value=4>÷</option>
14        </select>
15
16        <input type="text" id="migi" size="7">=
17        <input type="text" id='osiri' size="7"></input>
18
19      </p><button id='sanshutsu'>算出</button>
20
21        <p id="test"></p>
22
23
24        <script>
25            var hidari    = document.getElementById('hidari').value;
26            var migi      = document.getElementById('migi').value;
27            var sanshutsu = document.getElementById('sanshutsu');
28            var osiri     = document.getElementById('osiri');
29
30
31            function calcu(x,y){
32              var z = document.enzan.selectIndex;
33              if(z = 1) { return x + y; }
34              else if(z = 2){ return x - y; }
35              else if(z = 3){ return x * y; }
36              else if(z = 4){ return x / y; }
37            }
38
39            sanshutsu.onclick = function() {
40                osiri.value = calcu(hidari.value, migi.value);
41            }
42        </script>
43
44    </body>
45</html>
46

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

回答1件

ベストアンサー

一つずつ指摘しますね。

inputに閉じタグは要りません。</input>ってやつは削除。
ボタンの前の</p>も不要です。
var hidari = document.getElementById('hidari').value;とcalcu(hidari.valueってなってます。つまりhidari = document.getElementById('hidari').value.value; 間違いです。
var hidari = document.getElementById('hidari').value;って最初に書くと、計算するhidariの値がscript要素をロードした直後の値になります。つまりなにも入力していない状態です。空になります。計算する値は入力後にボタンを押した後に取得したいので、.valueはsanshutsu.onclick = function() {の中の方に書くのが正解。
var z = document.enzan.selectIndex;だと取得できません。

var z = document.getElementById('enzan').value;って感じにします。
0. このままだとhidari.valueとmigi.valueの値が文字列として処理されます。だからNumber(str)で数値にしてあげる必要があります。
0. 間違いやすいところですが、ifの中は==です。＝だと代入になります。

という感じです。

回答を見ずに試行錯誤した方が良いとおもいますが、一応、詰まったときのために書いておきます。自力でどうしても駄目だったときに参考にしてください。

html
1<!DOCTYPE html>
2<meta charset="UTF-8">
3
4<html>
5    <body>
6        <input type="text" id='hidari' size="7" value=5>
7
8        <select id="enzan">
9            <option value=1>+</option>
10            <option value=2>-</option>
11            <option value=3>×</option>
12            <option value=4>÷</option>
13        </select>
14
15        <input type="text" id="migi" size="7">=
16        <input type="text" id='osiri' size="7">
17
18        <button id='sanshutsu'>算出</button>
19
20
21        <script>
22            var hidari    = document.getElementById('hidari');
23            var migi      = document.getElementById('migi');
24            var sanshutsu = document.getElementById('sanshutsu');
25            var osiri     = document.getElementById('osiri');
26
27            function calcu(x,y){
28              x = Number(x);
29              y = Number(y);
30              var z = document.getElementById('enzan').value;
31              if(z == 1) { return x + y; }
32              else if(z == 2){ return x - y; }
33              else if(z == 3){ return x * y; }
34              else if(z == 4){ return x / y; }
35            }
36
37            sanshutsu.onclick = function() {
38                osiri.value = calcu(hidari.value, migi.value);
39            }
40        </script>
41
42    </body>
43</html>