Trying to make calculator and have one little problem

I am trying to make a calculator and I have a small problem. I have created a function that should show the user the final result, but every time the final result is undefined, but in console my function have a right answer. Can you help me please? I don't beg you for recreating all of my code, just wanna know what is my problem.

<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 = '';
})

Solution

Your add, substract, multiply, divide and operate functions are missing their return statements.

Right now you just log the values, that's why in the console you see the right result (coming from the console.log()s in add, substract, multiply or divide) but operate never gets that same value or return it to the calling function, which just gets undefined.

Here's the updated code:

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>