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();
};
});
"keyCode" is written in camelCase.
Working example:
document.onkeypress = function (e) {
if (e.keyCode == 13) {
alert("Enter pressed!");
}
};
<h1>Hello, World!</h1>
You need change e.keycode === 13
to e.keyCode === 13
.
Since e.keycode
evaluates to undefined
, undefined === 13
is always false
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With