What is the best way to capture the input value upon pressing the "Enter" key?

Question

What is the best way to capture the input value upon pressing the "Enter" key?

My first question here is about implementing the addtodo(todo) code. After trying it out successfully, I wanted to make it work when typing and pressing enter. However, despite attempting some other methods, I couldn't get it to work. I didn't receive any error messages in Chrome or VSCode. As a beginner, my code might be messy. How much more detail do you need? If you don't submit, I'll start writing a story (no kidding).

const dateElement = document.querySelector('.date');
        const input = document.querySelector('#text-bar')
        const list = document.querySelector('.input')
        //date stuff
        
        const options = {
          weekday: "long",
          month: "short",
          day: "numeric"
        };
        const today = new Date();
        
        dateElement.innerHTML = today.toLocaleDateString("en-US", options);
        
        function toodoo(todo) {
          const item =
            ` 
           <li><i class="far fa-circle" id="circle"></i></li> 
        <li>${todo}</li>
        <li>  <button class="edit">edit</button></li>
        <li> <button class="remove">remove</button></li>
            `;
          const position = "beforeend";
          list.insertAdjacentHTML(position, item);
        }
        
        document.addEventListener("enter", function(event) {
          if (event.keycode == 13) {
            const todo = input.Value;
            if (todo) {
              toodoo(todo);
            }
          }
        });

* {
          background-color: coral;
          margin: 0px;
        }
        
        body {
          text-align: center;
          margin: 100px;
        }
        
        .middle-space {
          height: 70vh;
          border: 2px solid rgba(126, 125, 125, 0.671);
          width: 30%;
          margin: auto;
          background-color: white;
        }
        
        #text-bar {
          width: 30%;
          border: 2px solid black;
          height: 3vh;
          margin-left: 25px;
          border-radius: 25px;
          background-color: white;
        }
        
        h1 {
          background-image: url('download (1).jpeg');
          width: 30%;
          padding-top: 8vh;
          padding-bottom: 2vh;
          text-align: left;
          font-size: 25px;
          margin: auto;
          border: 2px solid rgba(126, 125, 125, 0.671);
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          background-color: white;
        }
        
        #button {
          color: greenyellow;
          font-size: 25px;
        }
        
        @media(max-width:600px) {
          .middle-space {
            width: 100%;
          }
          #text-bar {
            width: 80%;
            margin: 0px;
          }
          h1 {
            width: 100%;
          }
        }
        
        /* Remove Edit */
        
        .input li {
          list-style: none;
          display: inline;
          list-style-type: none;
          padding-left: 10px;
          background-color: white;
        }
        
        .input {
          text-align: left;
          margin: auto;
          background-color: white;
          border-bottom: 2px solid black;
          border-radius: 24px;
          margin-top: 20px;
          padding-bottom: 10px;
        }
        
        #circle {
          background-color: white;
          color: greenyellow;
        }
        
        ul {
          background-color: white;
          list-style: none;
        }
        
        .edit {
          border: none;
          background-color: white;
          color: green;
          margin-left: 150px;
        }
        
        .remove {
          border: none;
          background-color: white;
          color: red;
        }
        
        .middle-space ul {
          padding: 0px;
          margin: 0px;
        }

<!DOCTYPE html>
          <html lang="en">
          
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>test</title>
            <link rel="stylesheet" href="style.css">
          
            <script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js"></script>
          </head>
          
          <body class="body">
            <h1 class="date">h</h1>
            <div class="middle-space">
              <div class="input">
                <ul>
                  <!--              <li><i class="far fa-circle" id="circle"></i></li> 
              <li>drinkcoffee</li>
               <li>  <button class="edit">edit</button></li>
               <li> <button class="remove">remove</button></li>-->
                </ul>
              </div>
            </div>
          
            <div class="input-field"><input type="text" id="text-bar" placeholder="write stuff or something magic will happen"> <i class="fas fa-plus-circle" id="button"></i></button>
            </div>
            <script src="test.js"></script>
          </body>
          
          </html>

javascript html css

Answer 1

Answer №1

Inside the enter-event function, declare a variable called 'input'. Upon the DOM being fully loaded, the script retrieves the value of input (which is currently empty) and does not perform any action with it. However, when you press Enter, the empty value is assigned to the 'todo' variable.

Answer 2

Inside the enter-event function, declare a variable called 'input'. Upon the DOM being fully loaded, the script retrieves the value of input (which is currently empty) and does not perform any action with it. However, when you press Enter, the empty value is assigned to the 'todo' variable.

Answer 3

Answer №2

To achieve the desired functionality, you can utilize a combination of a <form> element along with the submit event.

Note that there is no enter event available in JavaScript. Instead, consider using the keydown and keyup events for your implementation.

Incorporated below is a <form> element enclosing the <input> element, along with a

<button type="submit">

element to trigger form submission through a button click.

Ensure to listen to the submit event on the form. In the event handler, make sure to prevent the default form submission behavior by calling event.preventDefault(). This will enable you to customize the form submission process according to your requirements.

const dateElement = document.querySelector('.date');
const input = document.querySelector('#text-bar');
const list = document.querySelector('.input');

// Accessing the form element.
const form = document.querySelector('#todo-form');

// Date configurations.
const options = {
  weekday: "long",
  month: "short",
  day: "numeric"
};
const today = new Date();

dateElement.innerHTML = today.toLocaleDateString("en-US", options);

function createTodo(todo) {
  const item = `
    <li>
      <i class="far fa-circle" id="circle"></i>
    </li> 
    <li>${todo}</li>
    <li>  
      <button class="edit">edit</button>
    </li>
    <li>
      <button class="remove">remove</button>
    </li>
  `;
  const position = "beforeend";
  list.insertAdjacentHTML(position, item);
}

// Listen for submit event on form triggered by button click or enter key press.
form.addEventListener('submit', function(event) {
  event.preventDefault(); // Prevent actual form submission.
  const todo = input.value; // Pay attention to lowercase 'v'.
  if (todo) {
    createTodo(todo);
  };
});

* {
  background-color: coral;
  margin: 0px;
}

body {
  text-align: center;
  margin: 100px;
}

.middle-space {
  height: 70vh;
  border: 2px solid rgba(126, 125, 125, 0.671);
  width: 30%;
  margin: auto;
  background-color: white;
}

#text-bar {
  width: 30%;
  border: 2px solid black;
  height: 3vh;
  margin-left: 25px;
  border-radius: 25px;
  background-color: white;
}

h1 {
  background-image: url('download (1).jpeg');
  width: 30%;
  padding-top: 8vh;
  padding-bottom: 2vh;
  text-align: left;
  font-size: 25px;
  margin: auto;
  border: 2px solid rgba(126, 125, 125, 0.671);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: white;
}

#button {
  color: greenyellow;
  font-size: 25px;
}

@media(max-width:600px) {
  .middle-space {
    width: 100%;
  }
  #text-bar {
    width: 80%;
    margin: 0px;
  }
  h1 {
    width: 100%;
  }
}


/*remove edit*/

.input li {
  list-style: none;
  display: inline;
  list-style-type: none;
  padding-left: 10px;
  background-color: white;
}

.input {
  text-align: left;
  margin: auto;
  background-color: white;
  border-bottom: 2px solid black;
  border-radius: 24px;
  margin-top: 20px;
  padding-bottom: 10px;
}

#circle {
  background-color: white;
  color: greenyellow;
}

ul {
  background-color: white;
  list-style: none;
}

.edit {
  border: none;
  background-color: white;
  color: green;
  margin-left: 150px;
}

.remove {
  border: none;
  background-color: white;
  color: red;
}

.middle-space ul {
  padding: 0px;
  margin: 0px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
  <link rel="stylesheet" href="style.css">

  <script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js"></script>
</head>

<body class="body">
  <h1 class="date">h</h1>
  <div class="middle-space">
    <div class="input">
      <ul>
        <!--    <li><i class="far fa-circle" id="circle"></i></li> 
    <li>drinkcoffee</li>
     <li>  <button class="edit">edit</button></li>
     <li> <button class="remove">remove</button></li>-->
      </ul>
    </div>
  </div>

  <form id="todo-form">
    <div class="input-field">
      <input type="text" id="text-bar" placeholder="write stuff or something magic will happen"> 
      <button type="submit"><i class="fas fa-plus-circle" id="button"></i></button>
    </div>
  </form>
  <script src="test.js"></script>
</body>

</html>

Answer 4

To achieve the desired functionality, you can utilize a combination of a <form> element along with the submit event.

Note that there is no enter event available in JavaScript. Instead, consider using the keydown and keyup events for your implementation.

Incorporated below is a <form> element enclosing the <input> element, along with a

<button type="submit">

element to trigger form submission through a button click.

Ensure to listen to the submit event on the form. In the event handler, make sure to prevent the default form submission behavior by calling event.preventDefault(). This will enable you to customize the form submission process according to your requirements.

const dateElement = document.querySelector('.date');
const input = document.querySelector('#text-bar');
const list = document.querySelector('.input');

// Accessing the form element.
const form = document.querySelector('#todo-form');

// Date configurations.
const options = {
  weekday: "long",
  month: "short",
  day: "numeric"
};
const today = new Date();

dateElement.innerHTML = today.toLocaleDateString("en-US", options);

function createTodo(todo) {
  const item = `
    <li>
      <i class="far fa-circle" id="circle"></i>
    </li> 
    <li>${todo}</li>
    <li>  
      <button class="edit">edit</button>
    </li>
    <li>
      <button class="remove">remove</button>
    </li>
  `;
  const position = "beforeend";
  list.insertAdjacentHTML(position, item);
}

// Listen for submit event on form triggered by button click or enter key press.
form.addEventListener('submit', function(event) {
  event.preventDefault(); // Prevent actual form submission.
  const todo = input.value; // Pay attention to lowercase 'v'.
  if (todo) {
    createTodo(todo);
  };
});

* {
  background-color: coral;
  margin: 0px;
}

body {
  text-align: center;
  margin: 100px;
}

.middle-space {
  height: 70vh;
  border: 2px solid rgba(126, 125, 125, 0.671);
  width: 30%;
  margin: auto;
  background-color: white;
}

#text-bar {
  width: 30%;
  border: 2px solid black;
  height: 3vh;
  margin-left: 25px;
  border-radius: 25px;
  background-color: white;
}

h1 {
  background-image: url('download (1).jpeg');
  width: 30%;
  padding-top: 8vh;
  padding-bottom: 2vh;
  text-align: left;
  font-size: 25px;
  margin: auto;
  border: 2px solid rgba(126, 125, 125, 0.671);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: white;
}

#button {
  color: greenyellow;
  font-size: 25px;
}

@media(max-width:600px) {
  .middle-space {
    width: 100%;
  }
  #text-bar {
    width: 80%;
    margin: 0px;
  }
  h1 {
    width: 100%;
  }
}


/*remove edit*/

.input li {
  list-style: none;
  display: inline;
  list-style-type: none;
  padding-left: 10px;
  background-color: white;
}

.input {
  text-align: left;
  margin: auto;
  background-color: white;
  border-bottom: 2px solid black;
  border-radius: 24px;
  margin-top: 20px;
  padding-bottom: 10px;
}

#circle {
  background-color: white;
  color: greenyellow;
}

ul {
  background-color: white;
  list-style: none;
}

.edit {
  border: none;
  background-color: white;
  color: green;
  margin-left: 150px;
}

.remove {
  border: none;
  background-color: white;
  color: red;
}

.middle-space ul {
  padding: 0px;
  margin: 0px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>test</title>
  <link rel="stylesheet" href="style.css">

  <script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js"></script>
</head>

<body class="body">
  <h1 class="date">h</h1>
  <div class="middle-space">
    <div class="input">
      <ul>
        <!--    <li><i class="far fa-circle" id="circle"></i></li> 
    <li>drinkcoffee</li>
     <li>  <button class="edit">edit</button></li>
     <li> <button class="remove">remove</button></li>-->
      </ul>
    </div>
  </div>

  <form id="todo-form">
    <div class="input-field">
      <input type="text" id="text-bar" placeholder="write stuff or something magic will happen"> 
      <button type="submit"><i class="fas fa-plus-circle" id="button"></i></button>
    </div>
  </form>
  <script src="test.js"></script>
</body>

</html>

What is the best way to capture the input value upon pressing the "Enter" key?

Answer №1

Answer №2

Similar questions

The Ajax call was successful but the callback function failed to return

Converting a JSON object with numerical keys back to its original form

Javascript text validation is malfunctioning as the alert message fails to appear

What is the method by which Morgan middleware consistently displays the output on the console following the execution of all other middleware

Smooth scrolling problems arise when a page loads and the offset jumps unexpectedly when the ID and hash are set to the same value

Instructions for showcasing a 404 error page in the event that a back-end GET request to an API fails due to the absence of a user. This guide will detail the process of separating the

Aligning a navigation bar with a hamburger menu in the center

Including a hyperlink in VUE Bootstrap for seamless user navigation

I am selecting specific items from a list to display only 4 on my webpage

Is there a way to implement this media query within my JavaScript code?

When jQuery is combined with extending Object.prototype, the result is an error message that states, "c.replace is not

Easy PHP navigation options

Designing a button component with text

How to send emails with attachments using WordPress?

Removing invalid characters in a *ngFor loop eliminates any elements that do not meet the criteria

Need help figuring out how to use Javascript:void(0) to click a button in Selenium?

Continue duplicating image to stretch header across entire screen

Completing the regex properly

Attempted to create a node index.js file but encountered an error

The webpage fails to return to its original position after the script has been executed