我正在嘗試使用 AddEventListener 和 QuerySelector 制作一個簡單的 Javascript 計算器

Question

正如標題所說，我正在嘗試使用 AddEventListener 和 QuerySelector 函數從頭開始制作一個簡單的 Javascript 計算器，對我來說，除了給我“未定義”結果的 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 計算器

問題描述

1 個解決方案

解決方案1
0 已采納 2020-01-11 14:15:56

我正在嘗試使用 AddEventListener 和 QuerySelector 制作一個簡單的 Javascript 計算器

問題描述

1 個解決方案

解決方案1 0 已采納 2020-01-11 14:15:56

解決方案1
0 已采納 2020-01-11 14:15:56