Я хочу добавить enterfunction в Javascript для моего проекта списка TODO, в котором я могу нажать клавишу ввода и должен быть добавлен элемент, теперь я могу добавить список только через кнопку добавления .
Во-вторых, я хочу правильно организовать список для списка TODO, придав ему стиль. правильно, это не выглядит хорошо.
Теперь мой проект TODOLIST выглядит следующим образом https://i.stack.imgur.com/V1j5z.png
var add = document.getElementById('add');
var removeall = document.getElementById('removeall');
var list = document.getElementById('list');
//remove all button
removeall.onclick= function(){
list.innerHTML= '';
}
//adding a list element
add.onclick = function(){
addlis(list);
document.getElementById('userinput').value= '';
document.getElementById('userinput').focus();
}
function addlis(targetUl){
var inputText = document.getElementById('userinput').value;
var li = document.createElement('li');
var textNode= document.createTextNode(inputText + ' ');
var removeButton= document.createElement('button');
if(inputText !== ''){
removeButton.className= 'btn btn-xs btn-danger';
removeButton.innerHTML= '×';
removeButton.setAttribute('onclick','removeMe(this)');
li.appendChild(textNode); //onebelowanother
li.appendChild(removeButton);
targetUl.appendChild(li);
} else{
alert("Please enter a TODO");
}
}
function removeMe(item){
var p = item.parentElement;
p.parentElement.removeChild(p);
}
body{
font-family: 'EB Garamond', serif;
padding: 0;
margin: 0;
background-color: beige;
}
h1{
margin: 40px;
}
#userinput{
width: 350px;
height: 35px;
display: inline-block;
}
.btn{
margin: 20px 5px;
}
.form-control{
margin: 0 auto;
}
ul{
list-style: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/TodoStyle.css">
<link href="https://fonts.googleapis.com/css?family=EB+Garamond&display=swap" rel="stylesheet">
<title>My Online TODO List App</title>
</head>
<body>
<div class="container-fluid text-center">
<h1>My First working TODO</h1>
<input type="text" id="userinput" class="form-control" placeholder="what you need to do" onkeydown="return searchKeyPress(event);">
<button class="btn btn-success" id="add">Add a TODO</button>
<button class="btn btn-danger" id="removeall">REMOVE ALL TODO</button>
<ul id="list">
<li class="list"></li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/Todo.js"></script>
</body>
</html>