Reputation: 65

JavaScript, Pressing the enter key

My JavaScript assignment is a ''to-do list', the user needs to be able to press the enter key, I tried this code but it's not working. If anyone has suggestions please let me know! Thanks

EDIT: Here is my JavaScript, HTML and CSS file

EDIT II: Here are the directions in full 1. After inserting a new item, clear the input field 2. If the user presses the enter key, perform the same action as clicking the plus button. 3. Check to make sure that the user entered something into the input field adding it to the list 4. When the user clicks on the heading, so a prompt to allow them to change the title. Make sure they entered something before changing it.

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>

Upvotes: 1

Answers (3)

ketchupisred

Reputation: 651

I believe that the key code for enter is 13. See below.

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

Upvotes: 1

Aral Roca

Reputation: 5929

You need to register the onkeypress event on a HTML element, for example on the input text, like this:

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

Also, you can register the event on <body>or other HTML elements. And you can register the event using HTML or using Javascript.

In HTML:

<element onkeypress="myScript">

In JavaScript:

object.onkeypress=function(){myScript};

If you want to learn more about this event you can read this docs.

To know where is the handle function needs to be global (declared outside the load event).

The last thing to do, is to filter the enter button with e.keyCode === 13. Important: is a Number, not a String.

I put below all the code testable that you can see and run (I applied the example when press enter on the input text).

I hope to help you.

All the code

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>

Upvotes: 1

Cymen

Reputation: 14429

Look up the key code that will correspond to enter. One place to find this is on MDN KeyboardEvent:keyCode. Using that, you can write:

var ENTER = 13;
function handle(e){
    if(e.keyCode === ENTER){
      // insert a new line or whatever you want
    }
    return false;
}

Upvotes: 1

JavaScript, Pressing the enter key

Answers (3)

In HTML:

In JavaScript:

All the code

Related Questions