JavaScript addEventListener无法正常工作？

Question

I've created an variable which is selecting an Id of #bio , i'm then alerting the bio and getting a value of null.

I'm then adding an addEventListener to the bio variable and adding a focus and input to it, which should run a function called updateCounter();, every time the input box is foucessed on

The problem is the updateCounter isnt running. I'm getting no errors in chrome. Could anyone provide a solution and explain where i'm going wrong please ?

 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

Aside from some syntax errors, the main reason it's not working is because .addEventListener() is a method that operates on a DOM element.

Therefore you need to change:

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

to:

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

In addition, you don't need to include the # character in the .getElementById() method:

 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"/> 

Answer 2

You've written vanilla JavaScript here, not jQuery.

However, this is a simple fix: you pass the id without # to document.getElementById . You can fix this by adjusting your selection to be: document.getElementById('bio') . You'll also want to be more explicit: make it bio.addEventListener('focus', updateCounter); .