javascript - 制作计算器 (HTML/CSS/JS)

Question

我正在尝试创建一个计算器。在当前阶段，我试图让屏幕显示已单击的数字。但由于某种原因，它不会显示相关的按钮值。请你帮我找出不正确的方面:

const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');
const equalsButton = document.querySelector('[data-equals]');
const deleteButton = document.querySelector('[data-delete]');
const allClearButton = document.querySelector('[data-all-clear]');
const previousOperandTextElement = document.querySelector('[data-previous-operand]');
const currentOperandTextElement = document.querySelector('[data-current-operand]');


function ready(){
 
    for(let i = 0; i < numberButtons.length; i++){
        var button = numberButtons[i];
        var digitToAdd = button.textContent;
        button.addEventListener('click', addDigitToScreen(digitToAdd));
    }
}

function addDigitToScreen(a){
    let inputValue = document.getElementsByClassName('input')[0].textContent;
    inputValue = inputValue + ' ' + digitToAdd;
}

 <div class="fullCalc">
                <span class="screen">
                <div data-previous-operand class="calculation"></div>
                <div data-current-operand class="input"></div>
                </span>

                <button data-all-clear class="ac-key key">AC</button>
                <button data-delete class="del-key key">DEL</button>
                <button data-operation class="divide-key key">/</button>
                <button data-number class="key-1 num key">1</button>
                <button data-number class="key-2 num key">2</button>
                <button data-number class="key-3 num key">3</button>
                <button data-operation class="multiply-key num key">x</button>
               
                <button data-number class="key-4 num key">4</button>
                <button data-number class="key-5 num key">5</button>
                <button data-number class="key-6 num key">6</button>
                <button data-operation class="plus-key num key">+</button>
                
                <button data-number class="key-7 num key">7</button>
                <button data-number class="key-8 num key">8</button>
                <button data-number class="key-9 num key">9</button>
                <button data-operation class="minus-key adjustor key">-</button>

                <button data-operation class="period-key num key">.</button>
                <button data-number class="key-0 num key">0</button>
                <button data-equals class="equals-key key">=</button>

            
        </div>

加载页面时会自动触发就绪函数。

非常感谢!

Answer 1

有几个问题。

当您将输入的值分配给变量 (inputValue) 时，您只是制作了该值的副本，因此当您更改它时，您只是在更改您的副本，而不是原始值。要更改原始文件，请执行以下操作:
let input = document.getElementsByClassName("input")[0];
input.textContent = " " + digitToAdd;

在您的 addDigitToScreen 函数中，您已将参数命名为“a”，但稍后您引用的是“digitToAdd”——它们需要具有相同的名称。

当 ready() 函数在开始时运行时，随着循环的每次迭代，由于关闭，您将覆盖 'digitToAdd' 的值，因此每个按钮最终都会输出最后一个按钮的值 (0)。为避免此问题，请使用“let”而不是“var”。

当您将函数传递给 addEventListener 时，您不应在末尾包含括号，因为您的函数将在加载时自动调用。如果你想传入一个带参数的函数，就像你的例子一样，你可以改用一个箭头函数，它返回你想用参数调用的函数。这样它就不会在加载时被调用:

button.addEventListener("click", () => addDigitToScreen(digitToAdd));

最后，您需要在开始时调用 ready() 函数。

我认为这就是一切。我希望这有帮助。