我正在尝试使用 AddEventListener 和 QuerySelector 制作一个简单的 Javascript 计算器

Question

正如标题所说，我正在尝试使用 AddEventListener 和 QuerySelector 函数从头开始制作一个简单的 Javascript 计算器，对我来说一切似乎都正常工作，除了给我 "undefined" 结果的 equals 函数. 如果有人对此有解决方案，将不胜感激。谢谢

var btn = document.querySelectorAll(".num");
var display=document.getElementById("txtDisplay");
var btncanc=document.getElementById("canc");
var currentOp=document.querySelectorAll(".operazione");
var resul=document.getElementById("equal");
var OP = null;

function pressnum(){
    var num = this.innerHTML;
    display.value=display.value+num;
}

for (let i = 0; i < btn.length; i++) {
    const btnNum = btn[i];
    btnNum.addEventListener("click", pressnum);
}
function cancella(){
    display.value= "";
}

btncanc.addEventListener("click", cancella);

function pressOp() {
    prevNumber = parseInt(display.value);
    display.value = "";
}
for (let i = 0; i < currentOp.length; i++) {
    const Op = currentOp[i];
    Op.addEventListener("click", pressOp); 
}


function executeCalc() {
    var currentNumber = parseInt(display.value);
    var result;

    switch (currentOp) {
        case '+':
            result = prevNumber + currentNumber;
            break;
        case '-':
            result = prevNumber - currentNumber;
            break;
        case '/':
            result = prevNumber / currentNumber;
            break;
        case '*':
            result = prevNumber * currentNumber;
            break;
    }
    display.value = result;

}

resul.addEventListener("click", executeCalc);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Esercizio calcolatrice</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>

    <div class="container">

        <div class="row mt-3">
            <div class="col-9">
                <input type="text" class="form-control" readonly id="txtDisplay">
            </div>
            <div class="col-3">
                <button type="button" class="btn btn-danger btn-block" id="canc">C</button>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-3">
                <button type="button" class="btn btn-primary btn-block num">7</button>
            </div>
            <div class="col-3">
                <button type="button" class="btn btn-primary btn-block num">8</button>
            </div>
            <div class="col-3">
                <button type="button" class="btn btn-primary btn-block num">9</button>
            </div>
            <div class="col-3">
                <button type="button" class="btn btn-secondary btn-block operazione">/</button>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-3">
                <button type="button" class="btn btn-primary btn-block num">4</button>
            </div>
            <div class="col-3">
                <button type="button" class="btn btn-primary btn-block num">5</button>
            </div>
            <div class="col-3">
                <button type="button" class="btn btn-primary btn-block num">6</button>
            </div>
            <div class="col-3">
                <button type="button" class="btn btn-secondary btn-block operazione" id="op">*</button>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-3">
                <button type="button" class="btn btn-primary btn-block num">1</button>
            </div>
            <div class="col-3">
                <button type="button" class="btn btn-primary btn-block num">2</button>
            </div>
            <div class="col-3">
                <button type="button" class="btn btn-primary btn-block num">3</button>
            </div>
            <div class="col-3">
                <button type="button" class="btn btn-secondary btn-block operazione">-</button>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-3 offset-3">
                <button type="button" class="btn btn-primary btn-block num">0</button>
            </div>
            <div class="col-3">
                <button type="button" class="btn btn-success btn-block" id="equal">=</button>
            </div>
            <div class="col-3">
                <button type="button" class="btn btn-secondary btn-block operazione">+</button>
            </div>
        </div>

    </div>

    <script src="js/main.js"></script>
</body>
</html>

Answer 1

在您的开关中，"currentOp" 不是您期望的值。您还必须获取它的 innerHTML。

function pressOp() {
  prevNumber = parseInt(display.value);
  currentOp = this.innerHTML;
  display.value = "";
}

我正在尝试使用 AddEventListener 和 QuerySelector 制作一个简单的 Javascript 计算器

I'm trying to make a simple Javascript calculator with AddEventListener and QuerySelector

html

javascript

calculator

addeventlistener

queryselector