NaN第二次我按下“按钮”

Question

 let input = document.getElementById('input'); let button = document.getElementById('btn'); let output = document.getElementById('totalTip'); button.addEventListener('click', () => { input = input.value; output.innerHTML = (input * 5) + ' $'; }); 

我创建了一个小函数来计算input * 5 ，但是每次尝试输入另一个数字时，都会出现此错误：

无法读取HTMLButtonElement.button.addEventListene上未定义的属性“值”。

 button.addEventListener('click', () => { input = input.value; output.innerHTML = input * 5 + ' $'; }); 

先谢谢您的帮助。

Answer 1

第一次input是一个Element ，在事件回调中，您将input重新定义为Number或String ， input = input.value; 。

这意味着您正在第二次尝试获取.value ，例如10 ，它不存在，所以undefined * 5 === NaN

Answer 2

我认为这可能是您要追求的目标：

HTML：

<button>Click for 5x</button>
<input type="text">
<div class="output"</div>

js：这是您的问题，输入值是String ，您需要先将parseInt转换为Number ，然后再乘以5

const button = document.querySelector('button');
const input = document.querySelector('input');
const output = document.querySelector('.output');

button.addEventLister('click', () => {
  const number = parseInt(input.value)
  output.innerHTML = number * 5 + ' $';
})

另外请注意，您不应在此click事件中重新分配输入。 因此，请改用其他变量名称来分配临时输入值。