JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="input" />
<button id="enter" type="button">Enter</button>
<p id="numbersEntered"></p>
<button id="avg" type="button">Average</button>
<p id="average"></p>
</div>

JavaScript

let numbersEntered = document.querySelector("#numbersEntered");
let inputEl = document.querySelector("#input");
let numArr = [];


// buttons
let enterBtn = document.querySelector("#enter");
let avgBtn = document.querySelector("#avg");
let avgElement = document.querySelector("#average");

enterBtn.addEventListener("click", displayNums);

function displayNums() {
  let newNumber = Number(inputEl.value);
  numArr.push(newNumber);
  numbersEntered.innerHTML = "";
  console.log(numArr);

  for (let i = 0; i < numArr.length; i++) {
    numbersEntered.innerHTML += numArr[i] + ",";
  }
}

avgBtn.addEventListener("click", displayAvg);

// the below code is totally useless - I can't get the right sum 
function displayAvg() {
  let total = 0;
  for (let i = 0; i < numArr.length; i++) {
    total += numArr[i];
   
  }
  avgElement.innerHTML = (total/ numArr.length);
   console.log(total);
}