Manufacturing a Caclulator (HTML / CSS / JS)

debugcn 发表于 Dev

AndrewNeedsHelp

I am trying to create a calculator. At the current stage, I am trying to get the screen to display the number that has been clicked. But for some reason it won't display the relevant buttons value. Please can you help me identify the incorrect aspect:

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>

The ready function is fired automatically when the page is loaded.

Many thanks!

tommcandrew

There are a few issues.

When you assign the value of the input to a variable (inputValue), you're just making a copy of the value, so when you change it, you're just changing your copy, not the original. To change the original, do it like this:

let input = document.getElementsByClassName("input")[0]; input.textContent = " " + digitToAdd;
In your addDigitToScreen function, you've named the parameter 'a' but later you're referencing 'digitToAdd' - they need to have the same name.
When the ready() function runs at the start, with every iteration of the loop, you're overwriting the value of 'digitToAdd' because of closure and so every button will end up outputting the value of the last button (0). To avoid this problem, use 'let' instead of 'var'.
When you pass a function to addEventListener, you shouldn't include the parentheses on the end because your function will be automatically called on load. If you want to pass in a function with an argument, like in your example, you can instead use an arrow function which returns the function you want to call with the argument. This way it won't be called on load:

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