JavaScript addEventListener не работает?

Question

Я создал переменную, которая выбирает идентификатор #bio, затем я предупреждаю биографию и получаю значение null.

Я тогда добавление addEventListener к био переменной и добавить фокус и вход в него, который должен запустить функцию, называемую updateCounter() ;, каждый раз, когда поле ввода foucessed на

Проблема заключается в том updateCounter не работает. У меня нет ошибок в хроме. Может ли кто-нибудь предоставить решение и объяснить, где я ошибаюсь, пожалуйста?

var bio = document.getElementById('#bio'); // <textarea> element 
 
alert(bio); 
 

 
addEventListener(bio, 'focus', updateCounter); // Call updateCounter() on focus 
 
addEventListener(bio, 'input', updateCounter); // Call updateCounter() on input 
 

 
function updateCounter(e) { 
 
    alert('Update Counter ran'); 
 
}

<input name="title-input" id="bio" type="text" placeholder="Insert Title" />

Answer 1

Вы написали ваниль JavaScript здесь, не JQuery.

Однако это простое исправление: вы передаете id без # в document.getElementById. Вы можете исправить это, настроив свой выбор: document.getElementById('bio'). Вы также захотите быть более явными: сделайте это bio.addEventListener('focus', updateCounter);.

Answer 2

Помимо некоторых синтаксических ошибок основная причина, по которой она не работает, заключается в том, что .addEventListener() - это метод, который работает с элементом DOM.

Поэтому вам нужно изменить:

addEventListener(bio, 'focus', updateCounter); 
addEventListener(bio, 'input', updateCounter); 

к:

bio.addEventListener('focus', updateCounter); 
bio.addEventListener('input', updateCounter); 

Кроме того, вам не нужно включать # характер в методе .getElementById():

var bio = document.getElementById('bio'); 
 

 
bio.addEventListener('focus', updateCounter); 
 
bio.addEventListener('input', updateCounter); 
 
    
 
function updateCounter(e) { 
 
    console.log('Logging to the console.');  
 
}

<input name="title-input" id="bio" type="text" placeholder="Insert Title"/>