Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Primadonna Javier
seal-mask
.a{fill-rule:evenodd;}techdegree
Primadonna Javier
iOS Development Techdegree Student 4,236 Points

How to add "enter" event listener aside from clicking the button.

I am trying to apply what I learned from the Javascript and the DOM topic by building this simple to do list. My question is how do I add and event that when the user clicks "enter" key it will have the same function as clicking the button?

var myButton = document.querySelector('button.myB');
var myh1 = document.getElementById('title');
var input = document.getElementsByTagName('input')[0];
var myUl = document.getElementsByTagName('ul')[0];


myButton.addEventListener('click', function(){
   var newLi = document.createElement('li');
   newLi.textContent = input.value;
   myUl.appendChild(newLi);
   input.value = "";
  });

myUl.addEventListener('click', function(e){
  e.target.style.textDecoration="line-through";
});
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width">
       <title>repl.it</title>
       <script src="index.js"></script>
       <link href="index.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
       <h1 id="title">To do List</h1>
       <ul>

       </ul>
       <input type="text" class="myInput">
       <button class="myB">add item</button>
   </body>
</html>

4 Answers

Ford Heacock
Ford Heacock
18,068 Points

Hey Primadonna! For the enter key, you need to add a 'keyup' event listener, not a 'click'. You can then specify which exact key you are looking to listen to based on it's keycode. The enter key (a very common target) is 13. Check out http://keycode.io/ to learn the keycode numbers of other keyboard inputs. Working code below:

input.addEventListener('keyup',function(e){
    if (e.keyCode === 13) {
    alert('hi');
  }
});

example on jsfiddle: https://jsfiddle.net/fordwh44/c4hrxzq6/

Primadonna Javier
seal-mask
.a{fill-rule:evenodd;}techdegree
Primadonna Javier
iOS Development Techdegree Student 4,236 Points

Hi Ford,

Thanks for the prompt response. What if I want two event listeners? I want to add "keyup" in the same function without removing click?

Thanks!

Ford Heacock
Ford Heacock
18,068 Points

Of course! Best of luck!

Ford Heacock
Ford Heacock
18,068 Points

Hey Javier, adding multiple event listeners isn't a problem at all. Just add another one immediately after like so:

const input = document.querySelector('#myInput');
input.addEventListener('keyup',function(e){
    if (e.keyCode === 13) {
    alert('hi');
  }  
});

input.addEventListener('click',function(){
  alert('you clicked me!');
});

Updated jsfiddle: https://jsfiddle.net/fordwh44/c4hrxzq6/