Question

我正在尝试创建一个简单的待办事项列表应用程序JavaScript。我编写了JavaScript来基本上从输入元素中获取值并将其传递给几个函数。

我在CodePen上创建了一个实际示例，您可以在此处查看：http://cdpn.io/hnBmD

编辑：代码也位于下方？

似乎appendChild可能正在删除父函数正在创建的“li”节点？有人可以给我一个合理的解释吗？

注意：我在一个单独的文件中有JavaScript，它正在结束的body标签之前加载。

HTML：

<form>
 <p><input type="text" id="inItemText" autofocus><button type="submit" id="submitButton">+</button></p>
</form>
<ul id="toDoList">
</ul>

JavaScript的：

// Defining nodes.
var inItemText = document.getElementById("inItemText");
var submitButton = document.getElementById("submitButton");
// Once "enter" is pressed or click event is triggered, execute the function.
// The function below is basically checking the value of the input, to make sure the value is empty. If it isn't, it passes the value and the "ul" element node into the addNewItem function.
submitButton.onclick = function(){
      var itemText = inItemText.value;
      if (itemText == "" || itemText == " ") {
        return false;
      } else {
        addNewItem(document.getElementById("toDoList"), itemText);
      }
}
// Once the parameters are passed. This basically creates a "li" element, applies the value of the input element into the innerText of the "li" element created and then appends the "ul" with the "li" we just created. Also, it resets the value of the input so we can enter another checklist item in.
function addNewItem(list, itemText) {
    var listItem = document.createElement("li");
    listItem.innerText = itemText;
    list.appendChild(listItem);
    itemText = inItemText.value = "";
}

谢谢！

Answer 1

您需要在调用false后从onclick函数返回addNewItem。否则它将提交表格，重新加载页面。

submitButton.onclick = function(){
      var itemText = inItemText.value;
      if (itemText == "" || itemText == " ") {
        return false;
      } else {
        addNewItem(document.getElementById("toDoList"), itemText);
        return false;
      }
}

DEMO

或更简单：

submitButton.onclick = function(){
    var itemText = inItemText.value.trim();
    if (itemText !== "" || itemText == " ") {
        addNewItem(document.getElementById("toDoList"), itemText);
    }
    return false;
}

或者，正如其中一条评论建议的那样，摆脱表格，然后就无需提交。

Answer 2

如果没有必要，请删除表单，或者只是阻止默认表单提交操作。

submitButton.onclick = function (e) {
        e.preventDefault();
        var itemText = inItemText.value;
        if (itemText == "" || itemText == " ") {
            return false;
        } else {
            addNewItem(document.getElementById("toDoList"), itemText);
        }
 }

Answer 3

HTML中的button元素的type属性为submit。触发其click事件时，将执行默认操作，即提交表单。您需要阻止此默认行为。

var inItemText = document.getElementById("inItemText");
var submitButton = document.getElementById("submitButton");

submitButton.onclick = function(e){
  e.preventDefault(); //prevent it from submitting
  var itemText = inItemText.value;
  if (itemText == "" || itemText == " ") {
    return false;
  } else {
    addNewItem(document.getElementById("toDoList"), itemText);
  }
}

function addNewItem(list, itemText) {
 var listItem = document.createElement("li");
 listItem.innerText = itemText;
 list.appendChild(listItem);
}

appendChild可能删除元素？

3 个答案: