How to execute a function by pressing the enter key

Question

Im trying to make an event that executes a function when a certain key is pressed. I have added an eventListener , which looks for a keypress === 13 (enter key), but it's not woring & I have no error messages on the console. It also seems to me that my eventListener has access to my function addItem, which is in the global scope. I really can't figure why it doesnt work.

HTML:

<div class="container w-25">
  <div class='header'>
    <input class='mt-50' type='text' id='myInput' placeholder='Add a to-do'>
    <button id='btn' type='button'>Add</button>
  </div>
  <div class='content'>
    <ul id='list'>
      <li>Clean cauldron</li>
      <li>Beat Drago</li>
      <li>Study for B.U.S.E.</li>
      <li>Win quidditch cup</li>
    </ul>
  </div>
</div>

JavaScript:

let close = document.getElementsByClassName('close');
let btn = document.getElementById('btn');
let myList = document.getElementsByTagName('li');
let myInput = document.getElementById('myInput');

for (let i = 0; i < myList.length; i++) {
    let span = document.createElement('span');
    let cross = document.createTextNode('\u00D7');
    span.className = 'close';
    span.appendChild(cross);
    myList[i].appendChild(span);
}



for (let i = 0; i < close.length; i++) {
    close[i].addEventListener('click', function() {
        let div = this.parentElement
        div.style.display = 'none';
    })
}

btn.addEventListener('click', addItem);

function addItem() {
    let li = document.createElement('li');
    let myInput = document.getElementById('myInput').value;
    let newText = document.createTextNode(myInput)
    li.appendChild(newText);
    if (myInput === ''){
        alert('enter a to-do please')
    }else{
        document.getElementById('list').appendChild(li);
    }

 let span = document.createElement('span');
    let cross = document.createTextNode('\u00D7');
    span.className = 'close';
    span.appendChild(cross);
    li.appendChild(span);
    let close = document.getElementsByClassName('close');
    for (let i = 0; i < close.length; i++)
    close[i].addEventListener('click', function() {
        let div = this.parentElement
        div.style.display = 'none';
});

}


btn.addEventListener('click', function() {
    document.getElementById('myInput').value= '';
});


myInput.addEventListener('keydown', function(e) {
   if (e.keycode === 13) {
       addItem();
   }; 
});

Answer 1

" keyCode " is written in camelCase .

Working example:

 document.onkeypress = function (e) { if (e.keyCode == 13) { alert("Enter pressed!"); } }; 

 <h1>Hello, World!</h1> 

Answer 2

You need change e.keycode === 13 to e.keyCode === 13 .

Since e.keycode evaluates to undefined , undefined === 13 is always false .

Answer 3

You can also use key property of the event object:

myInput.addEventListener('keydown', function(e) {
   if (e.key === 'Enter') {
       addItem();
   }; 
})

Answer 4

I have another solution for you. Instead of checking for the enter key. Add a <form> tag & submit the <form> with an eventListener , instead of clicking on the <button> like so:

HTML:

<div class="container w-25">
    <div class='header'>
      <form id='form'>
        <input class='mt-50' type='text' id='myInput' placeholder='Add a to-do'>
        <button id='btn' type='submit'>Add</button>
      </form>  
    </div>
    <div class='content'>
        <ul id='list'>
        <li>Clean cauldron</li>
        <li>Beat Drago</li>
        <li>Study for B.U.S.E.</li>
        <li>Win quidditch cup</li>
        </ul>
    </div>
</div>

JavaScript:

let close = document.getElementsByClassName('close');
let fomr = document.getElementById('form');
let btn = document.getElementById('btn');
let myList = document.getElementsByTagName('li');
let myInput = document.getElementById('myInput');

for (let i = 0; i < myList.length; i++) {
    let span = document.createElement('span');
    let cross = document.createTextNode('\u00D7');
    span.className = 'close';
    span.appendChild(cross);
    myList[i].appendChild(span);
}


for (let i = 0; i < close.length; i++) {
    close[i].addEventListener('click', function() {
        let div = this.parentElement
        div.style.display = 'none';
    })
}

form.addEventListener('submit', addItem);

function addItem(e) {
        e.preventDefault();
    let li = document.createElement('li');
    let myInput = document.getElementById('myInput').value;
    let newText = document.createTextNode(myInput)
    li.appendChild(newText);
    if (myInput === ''){
        alert('enter a to-do please')
    }else{
        document.getElementById('list').appendChild(li);
    }

 let span = document.createElement('span');
    let cross = document.createTextNode('\u00D7');
    span.className = 'close';
    span.appendChild(cross);
    li.appendChild(span);
    let close = document.getElementsByClassName('close');
    for (let i = 0; i < close.length; i++)
    close[i].addEventListener('click', function() {
        let div = this.parentElement
        div.style.display = 'none';
});

}


form.addEventListener('submit', function() {
    document.getElementById('myInput').value= '';
});


myInput.addEventListener('keydown', function(e) {
   if (e.keycode === 13) {
       addItem();
   }; 
});

Check this working code sample .