当所有输入都是数字时，我一直得到 Nan

Question

首先我会说我知道有很多这样的问题但没有解决我的问题。我目前正在 javascript 中为网络应用程序制作一个计算器，我将运行作为输出保存到 NaN 中，我不确定为什么，这里是代码 html 首先是 js.. ..

//number of attendees
const num = document.getElementById('attendees').value;
//The percentage that need a place to stay
const per = document.getElementById('percentage').value;
//How many days the event is for
const _eventLength = document.getElementById('eventLength').value;



//The number of people needing rooms
const _percentage = (num, per) => {
  return (num / 100) * per;
};

//Room nights booked
const nightsBooked = (_percentage, _eventLength) => {

  document.getElementById("res1").innerHTML = percentage * _eventLength;
};
document.addEventListener('click', _percentage, false);
document.addEventListener('click', nightsBooked, false);

<form action="calculator.js" method="get">
  <label for="attendees">How many people will be attending your event?(include staff and anyone else involved!)</label>
  <input type="text" id="attendees">
  <br>
  <label for="percentage">What percentage need a place to stay?</label>
  <input type="text" id="percentage">
  <br>
  <label for="eventLength">How many days is your event?</label>
  <input type="text" id="eventLength">
  <br>
  <p id="res1" style="border: solid 1px; width: 200px; height: 20px;"></p>
  <button type="button" id="calbut1">></button>

</form>

如您所见，一切都已正确链接，这一定是我错误地遗漏了一小段代码，如果是的话，我会删除它，但是如果有人可以解释为什么这不起作用，如果您需要我，也请告诉我用代码笔或其他东西搞砸它，这样你就可以看到它的运行情况

Answer 1

您在一开始就赋值，none 个输入元素在该点具有值。然后在整个计算过程中使用这些“非值”变量，并且不出所料，将产生一个非数值...假设在单击按钮时得出最终数字，然后可以分配一个事件处理程序来进行计算奇怪的是，单击 document 本身时，而不是立即单击。

const nightsBooked = () => {

  const attendees = Number(document.getElementById('attendees').value);
  const percentage = Number(document.getElementById('percentage').value);
  const eventLength = Number(document.getElementById('eventLength').value);
  
  const calcpercentage = () => {
    if( !isNaN( attendees ) && !isNaN( percentage ) ){
      return ( attendees / 100 ) * percentage;
    }
    return 0;
  };

  document.getElementById("res1").innerHTML = calcpercentage() * eventLength;
};


document.getElementById('btn').addEventListener('click', (e)=>{
  nightsBooked();
});

<form method="get">

  <label for="attendees">How many people will be attending your event?(include staff and anyone else involved!)</label>
  <input type="text" id="attendees">
  <br>
  
  <label for="percentage">What percentage need a place to stay?</label>
  <input type="text" id="percentage">
  <br>
  
  <label for="eventLength">How many days is your event?</label>
  <input type="text" id="eventLength">
  <br>
  
  <p id="res1" style="border: solid 1px; width: 200px; height: 20px;"></p>
  
  <button type="button" id="btn">></button>
</form>

当所有输入都是数字时，我一直得到 Nan

I keep getting the Nan when all inputs are numbers

javascript

html

forms

nan