在js中運算不能隨便把value屬性定義成變數

在寫一個小 demo 的時候，無意中發現定義變量的時候直接寫入 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

但是放在瀏覽器運行的時候，發現完全沒有反應

為什麼呢？

（假裝思考五分鐘...）

因為 sub.value 不能直接定義在變量中

// 先定義id為sub的input框
var sub = document.getElementById('sub')

// 然後在運算的時候在直接使用sub.value
sub.value = a * b

順手放一個寫 demo 時候用的簡易計算器

<!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>