Question

为了使javascript更好，我列出了一个小的待办事项清单。它添加一个新的待办事项并将其删除。它还有一个柜台。我希望不仅可以通过单击按钮，还可以按Enter键来添加新的待办事项。怎么会这样这是我的代码：

 var button = document.getElementById('add-button');
        var count = 0;

        button.addEventListener('click', function () {    
        var item = document.getElementById('input').value;
        var text = document.createTextNode(item);
        var newItem = document.createElement('li');
        newItem.appendChild(text);
        document.getElementById('todoList').appendChild(newItem);
        count++;
        document.getElementById('counter').innerHTML = count;


        var removeTask = document.createElement('img');
        removeTask.setAttribute('src', './images/trash.jpg');
        removeTask.setAttribute('id', 'trash');
        removeTask.addEventListener('click', function() {
            newItem.parentNode.removeChild(newItem);
            count--;
            document.getElementById('counter').innerHTML = count;
        });
        newItem.appendChild(removeTask);

    });

这是我的无效尝试：

    var button = document.getElementById('add-button');
    var count = 0;
    var input = document.getElementById('input');

   input.addEventListener('keyup', function (event) {    
    event.preventDefault(); 
    if (key === 13) { 
    var item = document.getElementById('input').value;
    var text = document.createTextNode(item);
    var newItem = document.createElement('li');
    newItem.appendChild(text);
    document.getElementById('todoList').appendChild(newItem);
    count++;
    document.getElementById('counter').innerHTML = count;
    }
    var removeTask = document.createElement('img');
    removeTask.setAttribute('src', './images/trash.jpg');
    removeTask.setAttribute('id', 'trash');
    removeTask.addEventListener('click', function() {
        newItem.parentNode.removeChild(newItem);
        count--;
        document.getElementById('counter').innerHTML = count;
    });
    newItem.appendChild(removeTask);

});

这是我的html：

        <form>
            <h2>Todo App</h2>
            <p>Add a new todo</p>
            <input type="text" id="input" placeholder="Enter an activity......">
            <button type="button" id="add-button">Add Task</button>
        </form>

Answer 1

只需将所需的功能添加到submit的{{1}}事件中即可：

form

Answer 2

您的代码/尝试有很多问题。

您在HTML代码中缺少一些元素（例如，ID为todoList的元素）。这会导致您的js代码失败，因为您无法在appendChild()上调用undefined。
如果您仅使用客户端操作，则不需要<form>元素。如果您仍然想包装所有元素，只需使用<div>
您正在创建remove元素，而不管键是否为ENTER。因此，该脚本由于未找到合适的元素而失败。
没有错误，但您的“添加待办事项”按钮尚无功能。
您没有显示count的元素。
您应该阅读有关DRY principle的更多信息。

希望我能为您提供帮助。

下面您将找到一个完整的示例，以帮助您在遇到弯道时进步

var button = document.getElementById('add-button');
var count = 0;
var input = document.getElementById('input');

updateCount();

input.addEventListener('keyup', function(event) {
  event.preventDefault();

  var key = event.keyCode;

  if (key === 13) {
    addTodo(input.value);
  }
});

button.addEventListener('click', function(event) {
  addTodo(input.value);
});

function addTodo(newTodo) {
  var newItem = document.createElement('li');

  newItem.textContent = newTodo;
  document.getElementById('todoList').appendChild(newItem);
  count++;
  updateCount();

  var removeTask = document.createElement('img');

  removeTask.setAttribute('src', 'https://static.thenounproject.com/png/620343-200.png');
  removeTask.setAttribute('class', 'trash');
  removeTask.style.width = '15px';
  removeTask.style.height = '15px';
  removeTask.style.marginLeft = '10px';
  removeTask.style.cursor = 'pointer';
  removeTask.addEventListener('click', function() {
    newItem.parentNode.removeChild(newItem);
    count--;
    updateCount();    
  });
  newItem.appendChild(removeTask);
}

function updateCount() {
  var countElem = document.getElementById('count');
  
  countElem.textContent = count;
}

<div>
  <h2>Todo App</h2>
  <p>Add a new todo</p>
  <input type="text" id="input" placeholder="Enter an activity......">
  <button type="button" id="add-button">Add Task</button>
</div>
<p></p>
<h4> TODO LIST (<span id="count"></span>)</h4>
<ul id="todoList"></ul>

Answer 3

key === 13需要更改为e.keyCode===13 我已经根据您的代码修改了您的代码，但缺少了一些元素。

在这里查看工作的小提琴https://jsfiddle.net/Jkumar/oc5j9wsn/19/

在键盘上将输入文本写入ul

3 个答案: