Question

我正在尝试将两个函数放在代码的底部：//使用“添加”按钮将项目添加到待办事项列表，然后使用“输入键”将项目添加到列表中，并添加大量的这些函数为//添加新项目到待办事项列表功能，所以其他功能更简单，底部两个功能的代码不重复。

真的很感激任何建议！

//Add new item to To-Do List
function addNewItem(list, itemText) {
  totalItems++;

  var listItem = document.createElement("li");

  list.appendChild(listItem);
}

//Add item to list with ENTER KEY
var totalItems = 0;
var inItemText = document.getElementById("inItemText");
inItemText.focus();
inItemText.onkeyup = function(event) {
  if (event.which === 13) {
    var itemText = inItemText.value;

    if (!itemText || itemText === "") {
      return false;
    }

    addNewItem(document.getElementById("todoList"), itemText);

    inItemText.focus();
    inItemText.select();
  }
}


  //Add item to To-Do List with "Add" Button
  var btnNew = document.getElementById("btnAdd");
  btnNew.onclick = function() {
    var itemText = inItemText.value;

    if (!itemText || itemText === "") {
      return false;
    }


    addNewItem(document.getElementById("todoList"), itemText);

    inItemText.focus();
    inItemText.select();

  }

https://jsfiddle.net/Rassisland/7bkcLfhu/

Answer 1

绑定按钮并同时输入密钥

将文本输入和按钮包装在表单元素中并将addNewItem绑定到表单的onsubmit事件是个好主意。然后按钮和按键不需要单独处理，因为它们都启动提交事件。要使用表单实现所需的功能，您应该：

将文本输入和按钮包装在表单元素中
将按钮更改为<input type="submit" value="add">
将addNewItem函数绑定到表单
在addNewItem函数中调用event.preventDefault()以防止表单加载页面

重构想法

您可能想要考虑的另一件事是重构代码，以便它不会使用全局变量和函数。 I've Heard Global Variables Are Bad, What Alternative Solution Should I Use?

我还强烈建议使用JS库或框架来帮助实现浏览器兼容性，选择器等。如果您担心加载时间，可以通过CDN加载大多数流行的JS库。例如Googles cdn：https://developers.google.com/speed/libraries/当通过流行的cdn加载库时，很可能用户浏览器已经缓存了该资源，并且它不会导致任何额外的加载。

功能和优化问题

1 个答案:

绑定按钮并同时输入密钥

重构想法