Calculator button returns 'undefined', when pressed-CodePudding

sorry for asking so soon again, this is my second project and I got stuck at this: I'm making a simple calculator with basic operations, and right now, I'm creating the buttons' functions so when they're pressed, the value of the button is input into the calculator screen; my problem is, that the button returns 'undefined', even though I think I'm targeting the right class using document.querySelectorAll().

Again, thank you for helping me, I try no to ask much to be able to solve or at least figure out this stuff by myself, and though I like it and am motivated, i'm starting to feel kinda dumb.

Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Ysmael's Calculator</title>
    <link rel="stylesheet" href="calculator.css"/>
</head>
    <body>
        <h1>Calculator</h1>
        
        <div id="display">
            <input type="text" id="numField"/> 
        </div>

            <table>
                <tr>
                <th><input type="button" value="7"  id="button7"></th>
                <th><input type="button" value="4"  id="button4"/></th>
                <th><input type="button" value="1"  id="button1"/></th>
                <th><input type="button" value=" "  id="buttonPlus"></th>
                </tr>
                <tr>
                    <th><input type="button" value="8"  id="button8"/></th>
                    <th><input type="button" value="5"  id="button5"></th>
                    <th><input type="button" value="2"  id="button2"></th>
                    <th><input type="button" value="-"  id="buttonMinus"></th>
                </tr>
                <tr>
                    <th><input type="button" value="9"  id="button9"></th>
                    <th><input type="button" value="6"  id="button6"></th> 
                    <th><input type="button" value="3"  id="button3"></th>
                    <th><input type="button" value="*"  id="buttonMultiply"></th>
                </tr>
                <tr>
                    <th><input type="button" value="0"  id="button0"></th>
                    <th><input type="button" value="."  id="buttonDot"></th>
                    <th><button type="submit" value="="  id="buttonEqual">=</button></th>
                    <th><input type="button" value="%"  id="buttonDivide"></th>
                </tr>
            </table>
    </body>
</html>
<script src="calculator.js"></script>

//display//
let calculatorScreen = document.getElementById('numField');
//display//


const numButtons = document.querySelectorAll('.numButton');
const opButtons = document.querySelectorAll('.opButton');
const equalButton = document.querySelector('.equalButton');
const dotButton = document.querySelector('.decButton');



//buttons//

//Button funtions//
numButtons.forEach(number => {
    number.addEventListener('click', () => {
        calculatorScreen.value  = numButtons.value;
    })
})

I tried to input the value of a button, so I expected for the click to do that

CodePudding user response：

numButtons is an array, in which the value property is undefined, but it should be the button.value from parameter.

//display//
let calculatorScreen = document.getElementById('numField');
//display//


const numButtons = document.querySelectorAll('.numButton');
const opButtons = document.querySelectorAll('.opButton');
const equalButton = document.querySelector('.equalButton');
const dotButton = document.querySelector('.decButton');



//buttons//

//Button funtions//
numButtons.forEach(number => {
    number.addEventListener('click', () => {
        calculatorScreen.value  = number.value;
    })
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Ysmael's Calculator</title>
    <link rel="stylesheet" href="calculator.css"/>
</head>
    <body>
        <h1>Calculator</h1>
        
        <div id="display">
            <input type="text" id="numField"/> 
        </div>

            <table>
                <tr>
                <th><input type="button" value="7"  id="button7"></th>
                <th><input type="button" value="4"  id="button4"/></th>
                <th><input type="button" value="1"  id="button1"/></th>
                <th><input type="button" value=" "  id="buttonPlus"></th>
                </tr>
                <tr>
                    <th><input type="button" value="8"  id="button8"/></th>
                    <th><input type="button" value="5"  id="button5"></th>
                    <th><input type="button" value="2"  id="button2"></th>
                    <th><input type="button" value="-"  id="buttonMinus"></th>
                </tr>
                <tr>
                    <th><input type="button" value="9"  id="button9"></th>
                    <th><input type="button" value="6"  id="button6"></th> 
                    <th><input type="button" value="3"  id="button3"></th>
                    <th><input type="button" value="*"  id="buttonMultiply"></th>
                </tr>
                <tr>
                    <th><input type="button" value="0"  id="button0"></th>
                    <th><input type="button" value="."  id="buttonDot"></th>
                    <th><button type="submit" value="="  id="buttonEqual">=</button></th>
                    <th><input type="button" value="%"  id="buttonDivide"></th>
                </tr>
            </table>
    </body>
</html>
<script src="calculator.js"></script>

CodePudding user response：

When you are using the same class in multiple divs then you will get an array of values.

You can print the console.log(numButtons.values) to see the array.

You need to access value like this,

numButtons.forEach(number => {
    number.addEventListener('click', () => {
        calculatorScreen.value  = number.value;
    })
})