小さなデモを作成しているときに、変数を定義する際に 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>