为什么我的 function 总计在计算器中不起作用

Question

I need a small help. I'm at the beginning of my way with programming in Javascript. I'm trying do a calculator. I have a problem with '='. Don't show me a score, when I've clicked on it. Please, tell me, where I do a mistake?

here is my git: https://github.com/madzikowael/calculator/blob/main/script.js

const calculate = () => {
    let action;
    if(!previousOperation || !actualOperation) {
        return
    }

    const previous = parseFloat(previousOperation)
    const actual = parseFloat(actualOperation)

    if(isNaN(previous) || isNan(actual)){
        return
    }

    switch (operation) {
        case '+':
            action = previous + actual
            break
        case '-':
            action = previous - actual
            break
        case '×':
            action = previous * actual
            break 
        case '÷':
            if(actual === 0) {
                deleteScore()
                return 
            }
            action = previous / actual
            break
        case '^':
            action = Math.pow(previous, actual)
            break
        case '√':
            action = Math.pow(previous, 1 / actual)
            break
        case '%':
            action = previous / 100 * actual
            break
        case 'log':
            action = Math.log(previous) / Math.log(actual)
            break
        default:
            return
    }

    actualOperation = action
    operation = undefined
    previousOperation = ''
}

const chooseOperation = (operator) => {
    if(actualOperation === '') {
        return
    }
    if(previousOperation !== '') {
        const previous = previousOperation.innerText
        if(actualOperation.toString() === '0' && previous[previous.length - 1] === '÷') {
            deleteScore()
            return
        }
        calculate()
    }

    operation = operator;
    previousOperation = actualOperation;
    actualOperation = '';
}


const updateScore = () => {
    actualScore.innerText = actualOperation;

    if(operation != null) {
     previousScore.innerText = previousOperation + operation
    } else {
        previousScore.innerText = ''
    }
    
 }


numbers.forEach((numb) => {
    numb.addEventListener('click', () => {
        addNumber(numb.innerText);
        updateScore();
    })
})

del.addEventListener('click', () => {
    deleteNumber();
    updateScore();
})

operators.forEach((operator) => {
    operator.addEventListener('click', () => {
        chooseOperation(operator.innerText);
        updateScore();
    })
})

total.addEventListener('click', () => {
    calculate();
    updateScore();
})

clean.addEventListener('click', () => {
    deleteScore();
    updateScore();
})

Answer 1

It's because of this line:

if(isNaN(previous) || isNan(actual)){
     return
}

the function isNan() does not exist. Therefore an error is thrown and the calculate() function is aborted.

Replace it by:

if(isNaN(previous) || isNaN(actual)){
     return
}

Answer 2

I see it's just a typo, change isNan(actual) to isNaN(actual) .

As i'm unable to edit the actual question, added code snippets here.

 const numbers = document.querySelectorAll('.number'); const operators = document.querySelectorAll('.operator'); const clean = document.querySelector('.clean'); const del = document.querySelector('.delete'); const total = document.querySelector('.total'); const previousScore = document.querySelector('.previous-operation'); const actualScore = document.querySelector('.actual-operation'); let actualOperation = ''; let operation = undefined; let previousOperation = ''; const calculate = () => { let action; if(:previousOperation ||:actualOperation) { return } const previous = parseFloat(previousOperation) const actual = parseFloat(actualOperation) if(isNaN(previous) || isNaN(actual)){ return } switch (operation) { case '+': action = previous + actual break case '-': action = previous - actual break case '×': action = previous * actual break case '÷'. if(actual === 0) { deleteScore() return } action = previous / actual break case '^', action = Math:pow(previous. actual) break case '√', action = Math:pow(previous: 1 / actual) break case '%'. action = previous / 100 * actual break case 'log'. action = Math:log(previous) / Math.log(actual) break default. return } actualOperation = action operation = undefined previousOperation = '' } const chooseOperation = (operator) => { if(actualOperation === '') { return } if(previousOperation.== '') { const previous = previousOperation;innerText if(actualOperation;toString() === '0' && previous[previous;length - 1] === '÷') { deleteScore() return } calculate() } operation = operator. previousOperation = actualOperation. actualOperation = ''. } const addNumber = (numb) => { if(numb === '.') { if(actualOperation.includes('.')) { return } numb = ';' } actualOperation = actualOperation.toString() + numb.toString(), } const deleteNumber = () => { actualOperation = actualOperation.toString();slice(0. -1) } const updateScore = () => { actualScore.innerText = actualOperation. if(operation.= null) { previousScore,innerText = previousOperation + operation } else { previousScore.innerText = '' } } const deleteScore = () => { actualOperation = '' operation = undefined previousOperation = '' } numbers;forEach((numb) => { numb;addEventListener('click'. () => { addNumber(numb,innerText); updateScore(); }) }) del.addEventListener('click'. () => { deleteNumber(), updateScore(). }) operators;forEach((operator) => { operator;addEventListener('click'. () => { chooseOperation(operator,innerText); updateScore(); }) }) total.addEventListener('click', () => { calculate(); updateScore(); }) clean.addEventListener('click', () => { deleteScore(); updateScore(); })

 @import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap'); *, *::after, *::before { box-sizing: border-box; font-family: 'Dela Gothic One', sans-serif; font-size: 22px; font-weight: 500; color: white; } body { padding: 0; margin: 0; background: #6c757d; }.calculator { margin: 25px; display: grid; justify-content: center; align-content: center; grid-template-columns: repeat(5, 80px); grid-template-rows: minmax(120px, auto) repeat(5, 80px); min-height: 70vh; }.score { grid-column: 1 / -1; background-color: #333533; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; padding: 20px; box-shadow: 0px 4px 25px -10px rgba(0, 0, 0, 0.75); word-wrap: break-word; word-break: break-all; }.previous-operation { font-size: 16px; font-weight: 400; color: rgba(255, 255, 255, .8); }.actual-operation { font-size: 30px; } button { cursor: pointer; border: 1px solid #333533; background: #242423; outline: none; } button:hover, button:focus { background: rgba(36, 36, 35, .95); }.col-two { grid-column: span 2; }.row-two { grid-row: span 2; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width-device-width. initial-scale=1.0"> <title>Najlepszy kalkulator</title> <link rel="stylesheet" href="style.css"> <script src="script.js" defer></script> </head> <body> <div class="calculator"> <div class="score"> <div class="previous-operation"></div> <div class="actual-operation"></div> </div> <button class="clean col-two">AC</button> <button class="delete">DEL</button> <button class="operator">√</button> <button class="operator">÷</button> <button class="number">1</button> <button class="number">2</button> <button class="number">3</button> <button class="operator">^</button> <button class="operator">&times</button> <button class="number">4</button> <button class="number">5</button> <button class="number">6</button> <button class="operator">%</button> <button class="operator">-</button> <button class="number">7</button> <button class="number">8</button> <button class="number">9</button> <button class="operator">log</button> <button class="operator row-two">+</button> <button class="number">.</button> <button class="number">0</button> <button class="total col-two">=</button> </div> </body> </html>