Question

在这个简单的待办事项列表中，当文本字段中没有任何内容时，如何停止程序仍然创建新段落。当Add To List为空时，我希望该功能仅输出警报，而不是其他任何内容。我尝试了很多东西，但没有任何效果。任何帮助是极大的赞赏。谢谢！

JS Fiddle = http://jsfiddle.net/Renay/g79ssyqv/20/

<p id="addTask"> <b><u> To-Do List </u> </b> </p>
<input type='text' id='inputTask'/>
<input type='button' onclick='addText()' value='Add To List'/>

function addText(){
   var input = document.getElementById('inputTask').value;
   var node=document.createElement("p");
   var textnode=document.createTextNode(input)
   node.appendChild(textnode);
   document.getElementById('addTask').appendChild(node);

   var removeTask = document.createElement('input');
   removeTask.setAttribute('type', 'button');
   removeTask.setAttribute("value", "Remove");
   removeTask.setAttribute("id", "removeButton");
   removeTask.addEventListener('click', function() {
      node.parentNode.removeChild(node);
   }, false)
   node.appendChild(removeTask);

   if (input == "") {
      alert('Please add an entry');
   }
}

Answer 1

在if变量被分配到之后，将input语句移至顶部，然后向其添加return以突破该功能：

function addText() {
    var input = ...;

    if (input == "") {
        alert("...");
        return;
    }

    var node ...;
    ...
}

Amended JSFiddle demo

在函数中调用return语句时，将停止执行此函数。如果指定，则将给定值返回给函数调用者。如果省略表达式，则返回undefined。（MDN）

Answer 2

您可以在其他区块中移动“创建”部分

var input = document.getElementById('inputTask').value;

if (input == "") {
    alert('Please add an entry');

} else {

var node=document.createElement("p");
var textnode=document.createTextNode(input)
node.appendChild(textnode);
document.getElementById('addTask').appendChild(node);

var removeTask = document.createElement('input');
removeTask.setAttribute('type', 'button');
removeTask.setAttribute("value", "Remove");
removeTask.setAttribute("id", "removeButton");
removeTask.addEventListener('click', function() {
    node.parentNode.removeChild(node);
}, false)
node.appendChild(removeTask);
}

如何阻止Javascript中发生的事件

2 个答案: