In JavaScript, triggering an action by pressing the enter key

Question

In JavaScript, triggering an action by pressing the enter key

My latest project involves creating a JavaScript-based 'to-do list' where users can add tasks by pressing the enter key, but unfortunately, I'm facing some issues with my current code. Any suggestions or advice would be greatly appreciated! Thanks.

EDIT: Included below are links to my JavaScript, HTML, and CSS files

EDIT II: Here are the specific instructions for the project: 1. Clear the input field after adding a new item. 2. Enable the enter key to trigger the same action as clicking the plus button. 3. Validate that the user actually inputs something before adding it to the list. 4. Implement a feature that allows users to change the title when clicking on the heading, ensuring they provide an input before making modifications. https://i.sstatic.net/945os.png

window.addEventListener('load', function(){

var todos = document.getElementsByClassName('todo-item');
var removes = document.getElementsByClassName('remove');
document.getElementById('add-item').addEventListener('click', addItem, false);
document.querySelector('.todo-list').addEventListener('click', toggleCompleted, false);
document.querySelector('.todo-list').addEventListener('click', removeItem, false);

function toggleCompleted(e) {
console.log('=' + e.target.className);
if(e.target.className.indexOf('todo-item') < 0) {
return;
}
console.log(e.target.className.indexOf('completed'));
if(e.target.className.indexOf('completed') > -1) {
console.log(' ' + e.target.className);
e.target.className = e.target.className.replace(' completed', '');
} else {
console.log('-' + e.target.className);
e.target.className += ' completed';
}
}

function addItem() {
var list = document.querySelector('ul.todo-list');
var newItem = document.getElementById('new-item-text').value;
var newListItem = document.createElement('li');
newListItem.className = 'todo-item';
newListItem.innerHTML = newItem + '<span class="remove"></span>';
list.insertBefore(newListItem, document.querySelector('.todo-new'));

}

function valueField(input,val){
if(input.value == "")
input.value=val;

}

function clearField(input,val){
if(input.value == val)
input.value="";
}

function removeItem(e) {
if(e.target.className.indexOf('remove') < 0) {
return;
}

function handle(e){
var keycode 
if(e.keyCode === ""){
}
return false;
}
var el = e.target.parentNode;
el.parentNode.removeChild(el);
}

});

body {
  background-color: #BCDBF2;
  font-family: Helvetica, Arial, sans-serif;
}

body > div {
  width: 300px;
  margin:50px auto;
}

h1 {
text-align: center;
}

.todo-list {
  list-style: none;
  padding: 0px;
}

.todo-item {
  border: 2px solid #444;
  margin-top: -2px;
  padding: 10px;
  cursor: pointer;
  display: block;
  background-color: #ffffff;
}
.todo-new {
  display: block;
  margin-top: 10px;
}

.todo-new input[type='text'] {
  width: 260px;
  height: 22px;
  border: 2px solid #444;
}

.todo-new a {
  font-size: 1.5em;
  color: black;
  text-decoration: none;
  background-color: #ffffff;
  border: 2px solid #444;
  display: block;
  width: 24px;
  float: right;
  text-align: center;
}

.todo-new a:hover {
  background-color: #0EB0dd;
}

.remove {
  float: right;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.8em;
  color: #dd0000;
}

.remove:before {
  content: 'X';
}

.remove:hover {
  color: #ffffff;
}

.todo-item::after:hover{
  background-color: #dd0000;
  color: white;
}

.todo-item:hover {
  background-color: #0EB0FF;
  color: white;
}

.completed {
  text-decoration: line-through;
  opacity: 0.5;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lab 18 - Event Delegation</title>
<link rel='stylesheet' href='main.css'/>
</head>
<body>
<div>
<h1>To-Do List</h1>
<ul class='todo-list'>
<li class='todo-item'>4L 2% Milk
<span class='remove'></span></li>
<li class='todo-item'>Butter, Unsalted
<span class='remove'></span></li>
<li class='todo-item'>Dozen Eggs
<span class='remove'></span></li>
<li class='todo-item'>Walk the dog
<span class='remove'></span></li>
<li class='todo-item'>Cut the lawn
<span class='remove'></span></li>
<li class='todo-item'>Laundry
<span class='remove'></span></li>
<li class='todo-new'>
<input id='new-item-text' type='text'/>
<a id='add-item' href='#'>+</a>
</li>
</ul>
</div>
<script src='main.js'></script>
</body>
</html>

javascript

Answer 1

Answer №1

If you need to find the key code for the "enter" button, one helpful resource is the MDN KeyboardEvent:keyCode page. Once you have that information, you can create a function like this:

var ENTER = 13;
function checkEnterKey(e){
    if(e.keyCode === ENTER){
      // Add your desired functionality here
    }
    return false;
}

Answer 2

If you need to find the key code for the "enter" button, one helpful resource is the MDN KeyboardEvent:keyCode page. Once you have that information, you can create a function like this:

var ENTER = 13;
function checkEnterKey(e){
    if(e.keyCode === ENTER){
      // Add your desired functionality here
    }
    return false;
}

Answer 3

Answer №2

To enable the onkeypress event on an HTML element, such as the input text, you can do it like this:

<input id='new-item-text' type='text' onkeypress="return handle(event)" />

Additionally, you have the option to assign the event to the <body> or other HTML elements. The event registration can be done using HTML or through Javascript.

Using HTML:

<element onkeypress="myScript">

Using JavaScript:

object.onkeypress=function(){myScript};

If you wish to learn more about this event, refer to this documentation.

Remember that the handle function should be globally declared (outside the load event).

Lastly, ensure you filter out the enter key with e.keyCode === 13. It's crucial to note that this value is a Number, not a String.

I've included all the code below which you can view and run (the example triggers when pressing enter in the input text).

Hopefully, this information proves helpful.

All Code Snippets

window.addEventListener('load', function() {

  var todos = document.getElementsByClassName('todo-item');
  var removes = document.getElementsByClassName('remove');
  document.getElementById('add-item').addEventListener('click', addItem, false);
  document.querySelector('.todo-list').addEventListener('click', toggleCompleted, false);
  document.querySelector('.todo-list').addEventListener('click', removeItem, false);

  function toggleCompleted(e) {
    console.log('=' + e.target.className);
    if (e.target.className.indexOf('todo-item') < 0) {
      return;
    }
    console.log(e.target.className.indexOf('completed'));
    if (e.target.className.indexOf('completed') > -1) {
      console.log(' ' + e.target.className);
      e.target.className = e.target.className.replace(' completed', '');
    } else {
      console.log('-' + e.target.className);
      e.target.className += ' completed';
    }
  }

  function addItem() {
    var list = document.querySelector('ul.todo-list');
    var newItem = document.getElementById('new-item-text').value;
    var newListItem = document.createElement('li');
    newListItem.className = 'todo-item';
    newListItem.innerHTML = newItem + '<span class="remove"></span>';
    list.insertBefore(newListItem, document.querySelector('.todo-new'));

  }

  function valueField(input, val) {
    if (input.value == "")
      input.value = val;

  }

  function clearField(input, val) {
    if (input.value == val)
      input.value = "";
  }

  function removeItem(e) {
    if (e.target.className.indexOf('remove') < 0) {
      return;
    }

    var el = e.target.parentNode;
    el.parentNode.removeChild(el);
  }

});

function handle(e) {
  if (e.keyCode === 13) {
    console.log("Doing something");
  }
  return true;
}

body {
  background-color: #BCDBF2;
  font-family: Helvetica, Arial, sans-serif;
}
body > div {
  width: 300px;
  margin: 50px auto;
}
h1 {
  text-align: center;
}
.todo-list {
  list-style: none;
  padding: 0px;
}
.todo-item {
  border: 2px solid #444;
  margin-top: -2px;
  padding: 10px;
  cursor: pointer;
  display: block;
  background-color: #ffffff;
}
.todo-new {
  display: block;
  margin-top: 10px;
}
.todo-new input[type='text'] {
  width: 260px;
  height: 22px;
  border: 2px solid #444;
}
.todo-new a {
  font-size: 1.5em;
  color: black;
  text-decoration: none;
  background-color: #ffffff;
  border: 2px solid #444;
  display: block;
  width: 24px;
  float: right;
  text-align: center;
}
.todo-new a:hover {
  background-color: #0EB0dd;
}
.remove {
  float: right;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.8em;
  color: #dd0000;
}
.remove:before {
  content: 'X';
}
.remove:hover {
  color: #ffffff;
}
.todo-item::after:hover {
  background-color: #dd0000;
  color: white;
}
.todo-item:hover {
  background-color: #0EB0FF;
  color: white;
}
.completed {
  text-decoration: line-through;
  opacity: 0.5;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Lab 18 - Event Delegation</title>
  <link rel='stylesheet' href='main.css' />
</head>

<body>
  <div>
    <h1>To-Do List</h1>
    <ul class='todo-list'>
      <li class='todo-item'>4L 2% Milk
        <span class='remove'></span>
      </li>
      <li class='todo-item'>Butter, Unsalted
        <span class='remove'></span>
      </li>
      <li class='todo-item'>Dozen Eggs
        <span class='remove'></span>
      </li>
      <li class='todo-item'>Walk the dog
        <span class='remove'></span>
      </li>
      <li class='todo-item'>Cut the lawn
        <span class='remove'></span>
      </li>
      <li class='todo-item'>Laundry
        <span class='remove'></span>
      </li>
      <li class='todo-new'>
        <input id='new-item-text' type='text' onkeypress="return handle(event)" />
        <a id='add-item' href='#'>+</a>
      </li>
    </ul>
  </div>
  <script src='main.js'></script>
</body>

</html>

Answer 4

To enable the onkeypress event on an HTML element, such as the input text, you can do it like this:

<input id='new-item-text' type='text' onkeypress="return handle(event)" />

Additionally, you have the option to assign the event to the <body> or other HTML elements. The event registration can be done using HTML or through Javascript.

Using HTML:

<element onkeypress="myScript">

Using JavaScript:

object.onkeypress=function(){myScript};

If you wish to learn more about this event, refer to this documentation.

Remember that the handle function should be globally declared (outside the load event).

Lastly, ensure you filter out the enter key with e.keyCode === 13. It's crucial to note that this value is a Number, not a String.

I've included all the code below which you can view and run (the example triggers when pressing enter in the input text).

Hopefully, this information proves helpful.

All Code Snippets

window.addEventListener('load', function() {

  var todos = document.getElementsByClassName('todo-item');
  var removes = document.getElementsByClassName('remove');
  document.getElementById('add-item').addEventListener('click', addItem, false);
  document.querySelector('.todo-list').addEventListener('click', toggleCompleted, false);
  document.querySelector('.todo-list').addEventListener('click', removeItem, false);

  function toggleCompleted(e) {
    console.log('=' + e.target.className);
    if (e.target.className.indexOf('todo-item') < 0) {
      return;
    }
    console.log(e.target.className.indexOf('completed'));
    if (e.target.className.indexOf('completed') > -1) {
      console.log(' ' + e.target.className);
      e.target.className = e.target.className.replace(' completed', '');
    } else {
      console.log('-' + e.target.className);
      e.target.className += ' completed';
    }
  }

  function addItem() {
    var list = document.querySelector('ul.todo-list');
    var newItem = document.getElementById('new-item-text').value;
    var newListItem = document.createElement('li');
    newListItem.className = 'todo-item';
    newListItem.innerHTML = newItem + '<span class="remove"></span>';
    list.insertBefore(newListItem, document.querySelector('.todo-new'));

  }

  function valueField(input, val) {
    if (input.value == "")
      input.value = val;

  }

  function clearField(input, val) {
    if (input.value == val)
      input.value = "";
  }

  function removeItem(e) {
    if (e.target.className.indexOf('remove') < 0) {
      return;
    }

    var el = e.target.parentNode;
    el.parentNode.removeChild(el);
  }

});

function handle(e) {
  if (e.keyCode === 13) {
    console.log("Doing something");
  }
  return true;
}

body {
  background-color: #BCDBF2;
  font-family: Helvetica, Arial, sans-serif;
}
body > div {
  width: 300px;
  margin: 50px auto;
}
h1 {
  text-align: center;
}
.todo-list {
  list-style: none;
  padding: 0px;
}
.todo-item {
  border: 2px solid #444;
  margin-top: -2px;
  padding: 10px;
  cursor: pointer;
  display: block;
  background-color: #ffffff;
}
.todo-new {
  display: block;
  margin-top: 10px;
}
.todo-new input[type='text'] {
  width: 260px;
  height: 22px;
  border: 2px solid #444;
}
.todo-new a {
  font-size: 1.5em;
  color: black;
  text-decoration: none;
  background-color: #ffffff;
  border: 2px solid #444;
  display: block;
  width: 24px;
  float: right;
  text-align: center;
}
.todo-new a:hover {
  background-color: #0EB0dd;
}
.remove {
  float: right;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.8em;
  color: #dd0000;
}
.remove:before {
  content: 'X';
}
.remove:hover {
  color: #ffffff;
}
.todo-item::after:hover {
  background-color: #dd0000;
  color: white;
}
.todo-item:hover {
  background-color: #0EB0FF;
  color: white;
}
.completed {
  text-decoration: line-through;
  opacity: 0.5;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Lab 18 - Event Delegation</title>
  <link rel='stylesheet' href='main.css' />
</head>

<body>
  <div>
    <h1>To-Do List</h1>
    <ul class='todo-list'>
      <li class='todo-item'>4L 2% Milk
        <span class='remove'></span>
      </li>
      <li class='todo-item'>Butter, Unsalted
        <span class='remove'></span>
      </li>
      <li class='todo-item'>Dozen Eggs
        <span class='remove'></span>
      </li>
      <li class='todo-item'>Walk the dog
        <span class='remove'></span>
      </li>
      <li class='todo-item'>Cut the lawn
        <span class='remove'></span>
      </li>
      <li class='todo-item'>Laundry
        <span class='remove'></span>
      </li>
      <li class='todo-new'>
        <input id='new-item-text' type='text' onkeypress="return handle(event)" />
        <a id='add-item' href='#'>+</a>
      </li>
    </ul>
  </div>
  <script src='main.js'></script>
</body>

</html>

Answer 5

Answer №3

In my opinion, the key code that corresponds to the Enter key is 13 as demonstrated below.

function handleKey(e){
    if(e.keyCode === 13){
    }
    return false;
}

Answer 6

In my opinion, the key code that corresponds to the Enter key is 13 as demonstrated below.

function handleKey(e){
    if(e.keyCode === 13){
    }
    return false;
}

In JavaScript, triggering an action by pressing the enter key

Answer №1

Answer №2

Using HTML:

Using JavaScript:

All Code Snippets

Answer №3

Similar questions

Unable to deploy Firebase functions following the addition of an NPM package

There was a hiccup in the camera positioning as the tweening began

"Error in Node.js and Express: The variable 'next' has not been defined

Pairing ID_x with ID_x or iterating through IDs with an increment of +i

Tips for enabling auto-scroll feature in MuiList

When attempting to achieve a CSS percent width, the output is given in pixels instead. I am in search of a solution where the percentage remains the same as the

Loading identical code in two different div elements

Encountering Storage Access Problem on Android following upgrade to API 33

My React component is experiencing issues with the Console.log functionality

Navigating between different components in React Router V4 allows for seamless transitions without having to reload the

Angular: Enhancing View Attribute by Eliminating Extra Spaces

What is the best way to store and retrieve all the variable data from a .js file on a user's device?

Node.js provides a variety of ways to serve files, including determining where and how they are

What is the best way to efficiently retrieve gzipped XML content using JavaScript?

Creating custom events in a JavaScript constructor function

Unable to transform SVG files in Next.js Jest version 28

What specific checks and alerts are triggered by React.StrictMode?

Stop the removal of the CSS content property

Encountering a 401 error without proper authorization in a MERN application

Combining ExtJS Paging with Dropdown Selection