小さなデモを作成しているときに、変数を定義する際に直接 value を書き込むと、データを取得できなかったり、取得した内容が望んでいるものではなかったりすることに気づきました。js での演算では value 属性を変数として自由に定義してはいけません。
まずはコードの一部を見てみましょう。
<input type="text"" id="a">
<span>*</span>
<input type="text" id="b">
<input type="button" value="=" onclick="beto()">
<input type="text" id="sub" disabled>
<script>
function beto() {
var a = document.getElementById('a').value
var b = document.getElementById('b').value
var sub = document.getElementById('sub').value
sub = a + b
}
</script>
こう見ると、ロジックには問題がないように見えます。a と b の value を取得し、乗算を行い、sub に出力します。
しかし、ブラウザで実行すると、全く反応がありません。
なぜでしょうか？
（5 分間考えるふりをする...）
sub.value は直接変数に定義することができないからです。
// まずidがsubのinputボックスを定義します
var sub = document.getElementById('sub')
// そして、演算の際に直接sub.valueを使用します
sub.value = a * b
デモ作成時に使用した簡易計算機を紹介します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡易計算機</title>
</head>
<body>
<input type="text"" id="a">
<select id="c">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="b">
<input type="button" value="=" onclick="beto()">
<input type="text" id="sub" disabled>
<script>
function beto() {
var a = document.getElementById('a').value
var b = document.getElementById('b').value
var c = document.getElementById('c').value
var sub = document.getElementById('sub')
switch(c) {
case "+":
sub.value = parseInt(a) + parseInt(b);
break;
case "-":
sub.value = parseInt(a) - parseInt(b);
break;
case "*":
sub.value = parseInt(a) * parseInt(b);
break;
case "/":
sub.value = parseInt(a) / parseInt(b);
break;
}
}
</script>
</body>
</html>