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

Я думаю, что это может быть то, что вы собираетесь:

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 + ' $';
})

Также, как примечание, вы не должны переназначать ввод в этом событии щелчка.Поэтому вместо этого используйте другое имя переменной для назначения временного входного значения.

Answer 2

Первый раунд input - это Element, и в обратном вызове вашего события вы переопределяете input как Number или String с input = input.value;.

Это означает, что 2-йвремя вокруг вы пытаетесь получить .value что-то вроде 10, которого не существует, так что undefined * 5 === NaN