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，而{{1} }。

这意味着您正在第二次尝试从input = input.value;中获得.value之类的不存在的东西，因此10 undefined * 5 === < / p>

Answer 2

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

html：

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

js：这是您的问题，输入值为String，您需要先将Number强制转换为parseInt，再乘以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事件中重新分配输入。因此，请改用其他变量名称来分配临时输入值。

NaN第二次我按下“按钮”

2 个答案: