Question

我是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不允许我上传此内容。请忽略多余的内容。

Answer 1

查看此代码段：

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

已采取的步骤：

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

Answer 2

因为您是Java语言的初学者，所以让我向您展示事件委托方式和脚本位置

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

我正在尝试用Java编写计算器。但这不起作用

2 个答案: