0

我正在尝试构建一个简单的 JavaScript 计算器。我的功能部分有问题。我无法让数字出现在显示屏上，而且我也遇到了事件处理程序问题，我可以让所有数字都单击。

HTML

<form name="calculator">

    <div class="calculator_container">

<table id="calculator">
    <caption>
        <input type="text" name="display" id="display" maxlength="40">
    </caption>

    <tr>
        <td><input type="button" value="AC" class="btn" id="allClear"></td>
        <td><input type="button" value="C" class="btn" id="clear"></td>
        <td><input type="button" value="+/-" class="btn" id="plusMinus"></td>
        <td><input type="button" value="/" class="btn" id="operate"></td>
    </tr>

    <tr>
        <td><input type="button" name="seven" value="7" class="btn" id="number"></td>

        <td><input type="button" name="eight" value="8" class="btn" id="number"></td>

        <td><input type="button" name="nine" value="9" class="btn" id="number"></td>

        <td><input type="button" value="x" class="btn" id="operator"></td>
    </tr>

    <tr>

        <td><input type="button" name="four" value="4" class="btn" id="number"></td>
        <td><input type="button" name="five"  value="5" class="btn" id="number" ></td>
        <td><input type="button" name="six"  value="6" class="btn" id="number"></td>
        <td><input type="button" value="-" class="btn" id="operator"></td>

    </tr>

    <tr>
        <td><input type="button" name="one"  value="1" class="btn" id="number"></td>
        <td><input type="button" name="two"  value="2" class="btn" id="number"></td>
        <td><input type="button" name="three"  value="3" class="btn" id="number"></td>
        <td><input type="button" value="+" class="btn" id="operator"></td>


    </tr>



    <tr>

        <td><input type="button" name="zero"  value="0" class="btn" id="number"></td>
        <td><input type="button" value="." class="btn" id="dot"></td>
        <td><input type="button" value="=" class="btn" id="calculate"></td>


    </tr>
</table>
</div>
</form>

JS

let memory = "0";
let current = "0";
let operation = 0;
let maxLength = 30; 


const addDigit = (dig) => {
    if (current.length > maxLength){ 
    current = "Aargh! Too long"; //limit length
       } else { if ((eval(current) == 0) && (current.indexOf(".") == -1)
            ){ current = dig;
           } else { current = current + dig;

           };
    }; };
   document.calculator.display.value = current;
   document.getElementById("number").addEventListener("click", addDigit);





const dot = () => {
    if (current.length == 0) {
        current = "0.";
    } else {
        if (current.indexOf(".") == -1) {
            current = current + ".";
        };
    };

}
    document.calculator.display.value = current;
    document.getElementById("dot").addEventListener("click", dot);


const plusMinus = () => {
    if (current.indexOf("-") == 0) {
        current = current.substring(1);
    } else {
        current = "-" + current;
    };

    document.calculator.display.value = current;
}

    document.getElementById("plusMinus").addEventListener("click", plusMinus);


const clear = () => {
    current = "0";
    document.calculator.display.value = current;
}

    document.getElementById("clear").addEventListener("click", clear);


const allClear = () =>  {
    current = "0";
    operation = 0;
    memory = "0";
    document.calculator.display.value = current;
}

const operate = (op) => {
    if (op.indexOf("*") > -1) {operation = 1; };
    if (op.indexOf("/") > -1) {operation = 2; };
    if (op.indexOf("+") > -1) {operation = 3; };
    if (op.indexOf("-") > -1) {operation = 4; };

    memory = current;
    current = "";
    document.calculator.display.value = current;
}

    document.getElementById("operator").addEventListener("click", operate);


const calculate = () => {
    if (operation == 1) { current = eval(memory) * eval(current); };
    if (operation == 2) { current = eval(memory) / eval(current); };
    if (operation == 3) { current = eval(memory) + eval(current); };
    if (operation == 4) { current = eval(memory) - eval(current); };
    operation = 0;
    memory = "0";
    document.calculator.display.value = current;

}

    document.getElementById("calculate").addEventListener("click", calculate);

const fixCurrent = () =>  {
    current = document.calculator.display.value;
    current = "" + parseFloat(current);
    if (current.indexOf("NaN") != -1) {
        current = "Error!";
    };
    document.calculator.display.value = current;
}

我知道应该有一个简单的解决方法，但我已经走到了死胡同，我需要一些帮助来完成这个项目。

4

1 回答 1

0

首先：每个元素的 ID 应该始终是唯一的。您还应该避免为每个按钮使用一个表单，这对我来说感觉像是糟糕的编码风格。只需使用按钮。此外，您应该将输入框设置为只读，这样用户就无法输入他想要的内容。

这是一个为包装 div 内的每个按钮添加事件处理程序的最小示例。你应该从那里开始:)

var wrapper = document.getElementById('wrapper');
wrapper.addEventListener('click', (event) => {
  const isButton = event.target.nodeName === 'BUTTON';
  if (!isButton) {
    return;
  }
  var data = document.getElementById("data");
  data.value = data.value + event.target.value;
})
<input type="text" id="data" readonly>
<div id="wrapper">
<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
</div>

于 2020-03-27T18:43:06.273 回答