Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to execute a function by pressing the enter key

Tags:

javascript

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();
   }; 
});
like image 783
Peyo33 Avatar asked Oct 04 '19 16:10

Peyo33


2 Answers

"keyCode" is written in camelCase.

Working example:

document.onkeypress = function (e) {
  if (e.keyCode == 13) {
    alert("Enter pressed!");
  }
};
<h1>Hello, World!</h1>
like image 76
Telmo Trooper Avatar answered Nov 11 '22 21:11

Telmo Trooper


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

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

like image 28
Kosonome Avatar answered Nov 11 '22 21:11

Kosonome