代码之家 › 专栏 › 技术社区 › Riverain

尝试制作计算器,但有一个小问题

numbers dom javascript

Riverain · 技术社区 · 2 年前

我正在试着做一个计算器,但我遇到了一个小问题。我创建了一个函数,应该向用户显示最终结果,但每次最终结果都是未定义的,但在控制台中,我的函数都有一个正确的答案。你能帮我吗?我不乞求你重新创建我所有的代码,只是想知道我的问题是什么。

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<input id='calculatorOutput' type="text">
  <button class="numberButtons" >0</button>
  <button class="numberButtons" >1</button>
  <button class="numberButtons" >2</button>
  <button class="numberButtons" >3</button>
  <button class="numberButtons" >4</button>
  <button class="numberButtons" >5</button>
  <button class="numberButtons" >6</button>
  <button class="numberButtons" >7</button>
  <button class="numberButtons" >8</button>
  <button class="numberButtons" >9</button>
  <button class="operatorButtons">+</button>
  <button class="operatorButtons">-</button>
  <button class="operatorButtons">*</button>
  <button class="operatorButtons">/</button>
  <button id="equalButton">=</button>
  <button id="resetButton">Ð¡</button>
</body>
</html>

const numberButtons = document.querySelectorAll('.numberButtons');
const operatorButtons = document.querySelectorAll('.operatorButtons');
let calculatorOutput = document.getElementById('calculatorOutput');
const equalButton = document.getElementById('equalButton');
const resetButton = document.getElementById('resetButton');
let firstNumber = 0;
let operator = '';
let secondNumber = 0;
let finalNumber = 0;
let displayValue = '';

function add(firstNumber, secondNumber) {
    console.log(firstNumber + secondNumber);
}

function substract(firstNumber, secondNumber) {
    console.log(firstNumber - secondNumber);
}

function multiply(firstNumber, secondNumber) {
    console.log(firstNumber * secondNumber);
}

function divide(firstNumber, secondNumber) {
    console.log(firstNumber / secondNumber);
}

function operate(firstNumber, operator, secondNumber) {
    if(operator === '+') {
            add(firstNumber, secondNumber) 
  }
  
  else if(operator === '-') {
    substract(firstNumber, secondNumber);
  }
  
  else if(operator === '*') {
        multiply(firstNumber, secondNumber) 
  }
  
  else if(operator === "/") {
            divide(firstNumber, secondNumber) 
  }
}

numberButtons.forEach(singleButton =>  {
        singleButton.addEventListener('click', ()  => {
        calculatorOutput.value += singleButton.textContent;
            displayValue = calculatorOutput.value;
            console.log(displayValue);
    })
});

operatorButtons.forEach(singleOperatorButton => {
        singleOperatorButton.addEventListener('click', () => {
                calculatorOutput.value = '';
            firstNumber = displayValue;
                displayValue = '';
                operator = singleOperatorButton.textContent;
                /* console.log(`Operator: ${operator}`);
                console.log(`First number : ${firstNumber}; display value ${displayValue}`); */
    })
});

equalButton.addEventListener('click', () => {
            secondNumber = displayValue;
      /* console.log(`secondNumber : ${secondNumber}`); */
            finalNumber = operate(Number(firstNumber), operator, Number(secondNumber));
            console.log(finalNumber);
})

resetButton.addEventListener('click', () => {
            calculatorOutput.value = '';
      displayValue = '';
})

1 回复 | 直到 2 年前

Danziger 2 年前

你的 add , substract , multiply , divide 和 operate 函数缺少它们 return 声明。

现在您只需记录值,这就是为什么在控制台中您可以看到正确的结果(来自 console.log() s在 添加 , 减法 , 乘 或 分 )但是 运转 永远不会得到相同的值或将其返回给调用函数,调用函数只会得到 undefined 。

以下是更新后的代码:

const numberButtons = document.querySelectorAll('.numberButtons');
const operatorButtons = document.querySelectorAll('.operatorButtons');
let calculatorOutput = document.getElementById('calculatorOutput');
const equalButton = document.getElementById('equalButton');
const resetButton = document.getElementById('resetButton');
let firstNumber = 0;
let operator = '';
let secondNumber = 0;
let finalNumber = 0;
let displayValue = '';

function add(firstNumber, secondNumber) {
    return firstNumber + secondNumber;
}

function substract(firstNumber, secondNumber) {
    return firstNumber - secondNumber;
}

function multiply(firstNumber, secondNumber) {
    return firstNumber * secondNumber;
}

function divide(firstNumber, secondNumber) {
    return firstNumber / secondNumber;
}

function operate(firstNumber, operator, secondNumber) {
    if(operator === '+') return add(firstNumber, secondNumber) 
    if(operator === '-') return substract(firstNumber, secondNumber);
    if(operator === '*') return multiply(firstNumber, secondNumber) 
    if(operator === "/") return divide(firstNumber, secondNumber) 
}

numberButtons.forEach(singleButton =>  {
        singleButton.addEventListener('click', ()  => {
        calculatorOutput.value += singleButton.textContent;
            displayValue = calculatorOutput.value;
            console.log(displayValue);
    })
});

operatorButtons.forEach(singleOperatorButton => {
        singleOperatorButton.addEventListener('click', () => {
                calculatorOutput.value = '';
            firstNumber = displayValue;
                displayValue = '';
                operator = singleOperatorButton.textContent;
                /* console.log(`Operator: ${operator}`);
                console.log(`First number : ${firstNumber}; display value ${displayValue}`); */
    })
});

equalButton.addEventListener('click', () => {
            secondNumber = displayValue;
      /* console.log(`secondNumber : ${secondNumber}`); */
            finalNumber = operate(Number(firstNumber), operator, Number(secondNumber));
            console.log(finalNumber);
})

resetButton.addEventListener('click', () => {
            calculatorOutput.value = '';
      displayValue = '';
})

<input id='calculatorOutput' type="text">
<button class="numberButtons" >0</button>
<button class="numberButtons" >1</button>
<button class="numberButtons" >2</button>
<button class="numberButtons" >3</button>
<button class="numberButtons" >4</button>
<button class="numberButtons" >5</button>
<button class="numberButtons" >6</button>
<button class="numberButtons" >7</button>
<button class="numberButtons" >8</button>
<button class="numberButtons" >9</button>
<button class="operatorButtons">+</button>
<button class="operatorButtons">-</button>
<button class="operatorButtons">*</button>
<button class="operatorButtons">/</button>
<button id="equalButton">=</button>
<button id="resetButton">Ð¡</button>