Functional programming JavaScript: best way to incorporate an array into functions?

/* jshint esversion: 6 */
const display = document.getElementById('display');
const zero = document.getElementById('zero');
const one = document.getElementById('one');
const two = document.getElementById('two');
const three = document.getElementById('three');
const four = document.getElementById('four');
const five = document.getElementById('five');
const six = document.getElementById('six');
const seven = document.getElementById('seven');
const eight = document.getElementById('eight');
const nine = document.getElementById('nine');
const ac = document.getElementById('ac');
const negative = document.getElementById('negative');
const percentage = document.getElementById('percentage');
const divide = document.getElementById('divide');
const multiply = document.getElementById('multiply');
const minus = document.getElementById('minus');
const plus = document.getElementById('plus');
const decimal = document.getElementById('decimal');
const equals = document.getElementById('equals');

const numButtons = [zero, one, two, three, four, five, six, seven, eight, nine];
const operatorArray = [divide, multiply, minus, plus];

let arr = []; // Store user input.
let percentageArr = []; // Array to make percentage function work.
let percentStartNum = []; // the variable number which will be used to work out percentage
let str = ''; // Display user input in the display section.

//This is a loop to avoid recreating the addEventListener for numbers 0 - 9.
function loopNumberButtons() {
  function reduceCode(pushNum, concatNum) { //reduce code function buttons 0-9.
    if (display.value.length < 9) {
      arr.push(pushNum);
    } else {
      alert('Nine digits only.');
      arr.toString().split('').pop().join('');
    }

    ac.innerHTML = 'C';
    str = str.concat(concatNum);
    display.value = str;
  }

  for (let i = 0; i <= numButtons.length; i++) {
    numButtons[i].addEventListener('click', () => { .  //HERE IS WHERE FIRST CONSOLE ERROR SHOWS
      reduceCode(i, i);
    });
  }
}

// function to calculate the arr.
function calculateArray(array) {
  return eval(arr.toString().split(',').join(''));
}

function displayString(string) {
  return str = string;
}

function resetDisplay(str) {
  display.value = str;
}

function loopOperators() {
  for (let i = 0; i < operatorArray.length; i++) {
    operatorArray[i].addEventListener('click', () => {
      displayString(''); //do not delete.
      switch (operatorArray[i]) {
        case divide:
          arr.push('/');
          resetDisplay('');
          break;
        case plus:
          arr.push('+');
          resetDisplay('');
          break;
        case minus:
          arr.push('-');
          resetDisplay('');
          break;
        case multiply:
          arr.push('*');
          percentStartNum.push(display.value);
          resetDisplay('');
          break;
      }
    });
  }
}

negative.addEventListener('click', () => {
  arr.push('-');
  str = str.concat('-');
  display.value = str;
});

decimal.addEventListener('click', () => {
  arr.push('.');
  str = str.concat('.');
  display.value = str;
});

ac.addEventListener('click', () => {
  arr = [];
  percentageArr = [];
  display.value = '0';
  str = '';
  display.style.fontSize = '7rem';
  if (ac.innerHTML = 'C') {
    ac.innerHTML = 'AC';
  }
});

percentage.addEventListener('click', () => { // needs to be fixed
  percentageArr.push('x');
  let number = eval(str);
  display.value = number * 0.01;
});

equals.addEventListener('click', () => {
  str = '';
  console.log(percentageArr.length);
  if (percentageArr.length === 1) {
    display.value = eval(display.value) * percentStartNum[0];

  } else {
    display.value = calculateArray(arr);
    if (display.value.length > 9) {
      display.style.fontSize = '3.5rem';
    }
  }
});
loopOperators();
loopNumberButtons(); //HERE IS WHERE SECOND CONSOLE ERROR SHOWS