制造Caclulator (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

有几个问题。

1. 当您将输入的值赋值给变量(inputValue)时，您只是在复制该值，所以当您更改它时，您只是在更改副本，而不是原始副本。若要更改原始文件，请按以下方式进行：

let input = document.getElementsByClassName("input")[0]; input.textContent = " " + digitToAdd;

• In您的addDigitToScreen函数，您已经将参数命名为'a‘，但稍后您将引用'digitToAdd’--它们需要具有相同的名称。当digitToAdd()函数在开始时运行时，在循环的每一次迭代中，您都会因为闭包而覆盖'digitToAdd‘的值，因此每个按钮最终都会输出最后一个按钮(0)的值。为了避免这个问题，请使用'let‘而不是’var‘.

• ，当您将一个函数传递给addEventListener时，不应该在末尾包含括号，因为加载时将自动调用您的函数。如果您想传递一个带有参数的函数，就像在您的示例中一样，您可以使用一个箭头函数来返回要用参数调用的函数。这样就不会在加载时调用它：

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

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

我想这就是一切。我希望这能帮到你。