我正在尝试用 Javascript 制作计算器。但它不工作答案

【问题标题】：I am trying to make a calculator in Javascript. But it is not working somehow我正在尝试用 Javascript 制作计算器。但它不工作
【发布时间】：2020-12-22 17:07:59
【问题描述】：

我是一名 JavaScript 初学者。我正在尝试用它构建一个计算器。它没有样式，并且有不需要的类属性。请忽略这一点。这是我尝试使用的代码：

<html>
    <head>
        <title>HTML5 Calculator</title>
        <style>
        </style>
        <script>
            function dis(val) {
                document.getElementById("displayArea").value = val;
            }

            function calculate() {
                var finalValue = document.getElementById('diaplayArea').value;
                var evaluatedValue = eval(finalValue);
                document.getElementById('displayArea').value = y;
            }

            function clear() {
                document.getElementById('displayArea').value = '';
            }
        </script>
    </head>
    <body>
        <div><input type="text" id="displayArea"></div>
        <h1>
            <div id="buttons">
                <button onclick="dis(1)" id="1" class="row-1">
                    1
                </button>
                <button onclick="dis(2)" id="2" class="row-2">
                    2
                </button>
                <button onclick="dis(3)" id="3" class="row-3">
                    3
                </button>
                <button onclick="dis(/)" id="/" class="row-4">
                    /
                </button>
                <br>
                <button onclick="dis(4)" id="4" class="row-1">
                    4
                </button>
                <button onclick="dis(5)" id="5" class="row-2">
                    5
                </button>
                <button onclick="dis(6)" id="6" class="row-3">
                    6
                </button>
                <button onclick="dis(*)" id="*" class="row-4">
                    *
                </button>
                <br>
                <button onclick="dis(7)" id="7" class="row-1">
                    7
                </button>
                <button onclick="dis(8)" id="8" class="row-2">
                    8
                </button>
                <button onclick="dis(9)" id="9" class="row-3">
                    9
                </button>
                <button onclick="dis(+)" id="+" class="row-4">
                    +
                </button>
                <br>
                <button onclick="dis(.)" id="." class="row-1">
                    .
                </button>
                <button onclick="dis(0)" id="0" class="row-2">
                    0
                </button>
                <button onclick="calculate()" id="calculateButton" class="row-3">
                    =
                </button>
                <button onclick="dis(-)" id="-" class="row-4">
                    -
                </button>
            </div>
        </h1>    
    </body>
</html>

但它无法以某种方式工作。有人可以告诉我这里的缺陷是什么。我已经尝试了一切。如果我将var 替换为let。括号中有无穷无尽的错误。我正在写额外的东西，因为 stackoverflow 不允许我上传这个。请忽略多余的东西。

【问题讨论】：

定义“它不工作”？
var 让创建错误？这些错误是什么？
拼写错误：diaplayArea
在 dis(/) 周围加上引号，这样它就是 dis('/')
这里有一大堆问题。学习使用您的浏览器开发人员工具会为您指出其中的许多内容。

标签： javascript html css calculator

【解决方案1】：

看看这个sn-p：

<html>
<head>
    <title>HTML5 Calculator</title>
    <style>
    </style>
    <script>
        function dis(val) {
            if(val != '')
                display.value += val;
            else
                display.value = val;
        }

        function calculate() {
            display.value = eval(display.value);
        }
    </script>
</head>
<body>
    <div>
        <input type="text" id="displayArea">
        <button onclick="dis('')" >
            C
        </button>
    </div>
    <h1>
        <div id="buttons">
            <button onclick="dis('1')" id="1" class="row-1">
                1
            </button>
            <button onclick="dis('2')" id="2" class="row-2">
                2
            </button>
            <button onclick="dis('3')" id="3" class="row-3">
                3
            </button>
            <button onclick="dis('/')" id="/" class="row-4">
                /
            </button>
            <br>
            <button onclick="dis('4')" id="4" class="row-1">
                4
            </button>
            <button onclick="dis('5')" id="5" class="row-2">
                5
            </button>
            <button onclick="dis('6')" id="6" class="row-3">
                6
            </button>
            <button onclick="dis('*')" id="*" class="row-4">
                *
            </button>
            <br>
            <button onclick="dis('7')" id="7" class="row-1">
                7
            </button>
            <button onclick="dis('8')" id="8" class="row-2">
                8
            </button>
            <button onclick="dis('9')" id="9" class="row-3">
                9
            </button>
            <button onclick="dis('+')" id="+" class="row-4">
                +
            </button>
            <br>
            <button onclick="dis('.')" id="." class="row-1">
                .
            </button>
            <button onclick="dis(0)" id="0" class="row-2">
                0
            </button>
            <button onclick="calculate()" id="calculateButton" class="row-3">
                =
            </button>
            <button onclick="dis('-')" id="-" class="row-4">
                -
            </button>
        </div>
    </h1>
    <script type="text/javascript">
        const display = document.getElementById("displayArea");
    </script>
</body>
</html>

采取的步骤：

在<body>末尾新创建的<script>中，我们创建变量display来存储对元素<input type="text" id="displayArea">的引用。
如果用户传递任何数字/符号，函数dis(val) 将其附加到display，否则如果用户传递空字符串，函数dis(val) 清除显示。
从函数 calculate() 中删除了不必要的变量。
函数 clear() 是多余的，已被删除。
添加按钮C 以清除<input type="text" id="displayArea"> 的内容。

【讨论】：

【解决方案2】：

因为你是 Javascript 初学者，让我来告诉你事件委托方式，以及脚本放置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>calculator</title>
  <style>
    #buttons button {
      width: 4em;
      float: left;
      margin: .2em;
      }
    #buttons button:nth-of-type(4n+1) {
      clear: left;    /* replace <br> */
      } 
    #buttons button:nth-of-type(4n) {
      margin-left: 1em; 
      }
  </style>
</head>
<body>

  <div>
    <button id="bt-clear"> c </button>
    <input type="text" id="display-area">
  </div>
  <h1>
    <div id="buttons">
      <button> 1 </button> <button> 2 </button> <button> 3 </button> <button> / </button>
      <button> 4 </button> <button> 5 </button> <button> 6 </button> <button> * </button>
      <button> 7 </button> <button> 8 </button> <button> 9 </button> <button> + </button>
      <button> . </button> <button> 0 </button> <button> = </button> <button> - </button>
    </div>
  </h1>

<script> // script part is under any htlm body tags

  const buttons     = document.getElementById('buttons')
    ,   btClear     = document.getElementById('bt-clear')
    ,   displayArea = document.getElementById('display-area')
    ;
  btClear.onclick = () =>
    {
    displayArea.value = ''
    }
  buttons.onclick = e => // event delegation. 
    {
    if (!e.target.matches('button')) return // ignore other clicks

    let btVal = e.target.textContent.trim()

    switch (btVal)
      {
      case '=':
        displayArea.value = eval(displayArea.value)
        break;
      case '/':
      case '*':
      case '+':
      case '-':
        displayArea.value += ` ${btVal} `
        break;
      default:
        displayArea.value += btVal
        break;
      }
    }
</script>
</body>
</html>

【讨论】：