why does innerHTML return number as NaN?

const bill = document.getElementById('bill');
const billAmount = parseFloat(bill.value);
const numOfPeople = document.getElementById('numberOfPeople');
const numberOfPeople = parseFloat(numOfPeople.value);

let tipAmount = document.querySelector('.tip_amount');

tipButtons.forEach(tipButton => {
    tipButton.addEventListener('click', (e) => {
        if(e.target.innerText === "5%") {
            console.log("calculate 5% tip")
        
            tipAmount.innerHTML = (billAmount * 0.05) / numberOfPeople;
        }       
    })
});

const bill = document.getElementById('bill');
const billAmount = parseFloat(bill.value);
const numOfPeople = document.getElementById('numberOfPeople');
const numberOfPeople = parseFloat(numOfPeople.value);

let tipAmount = document.querySelector('.tip_amount');

tipButtons.forEach(tipButton => {
    tipButton.addEventListener('click', (e) => {
        if(e.target.innerText === "5%") {
            console.log("calculate 5% tip")
        
            tipAmount.innerHTML = (billAmount * 0.05) / numberOfPeople;
        }       
    })
});