Javascript - 空节点问题

Question

我正在学习使用节点，我有一点问题，然后我不知道为什么它不起作用。

https://jsfiddle.net/Lrzy0263/

HTML

 <input type="text" id="couleur"> 
 <button id="ajouter">Ajouter</button>
 <ul id="liste"></ul>

的Javascript

document.getElementById("ajouter").addEventListener('click',
    function (){
        var couleur = document.getElementById("couleur").value;
        var li = document.createElement("li");
        var texte =       document.createTextNode(document.getElementById("couleur").value);
        li.appendChild(texte);
        document.getElementById("liste").appendChild(li);
        document.getElementById("couleur").value = "";
        document.getElementById("couleur").focus();
        if(couleur.length == 0){
            return false;
        }
    }
)
document.getElementById("liste").addEventListener('click',
    function(e){
          document.getElementById("liste").removeChild(e.target);
    }
)

问题是输入为空时，当我点击添加“li”时，它会继续添加空“li”O_o

如何停止活动？我已经有了长度= 0时的条件但是如果我只返回false则它不起作用。

如果你有一些想法，我会对它开放=）

度过愉快的一天

Answer 1

检查长度是否为零的if语句位于函数的末尾。返回false不会取消已经运行的代码;你必须在之前返回添加LI。将if语句移到函数顶部，如下所示：

document.getElementById("ajouter").addEventListener('click',
    function (){
        var couleur = document.getElementById("couleur").value;
        if(couleur.length == 0){
            return false;
        }
        var li = document.createElement("li");
        var texte =       document.createTextNode(document.getElementById("couleur").value);
        li.appendChild(texte);
        document.getElementById("liste").appendChild(li);
        document.getElementById("couleur").value = "";
        document.getElementById("couleur").focus();
    }
)

Answer 2

我做了一些改变。您的主要问题是您需要将附加代码放在if块中。然后检查输入中的值是否为空白。如果是这样，代码会附加元素。

我还为DOM元素创建了变量，因此您不必继续执行＆＃34;文档＆＃34;遍历。

document.getElementById("ajouter").addEventListener('click',
        function (){
           var couleur = document.getElementById("couleur"),
               couleurVal = couleur.value,
               ul = document.getElementById("liste"),
               li = document.createElement("li"),
               texte = document.createTextNode(couleurVal);

          if(couleurVal !== ''){
            li.appendChild(texte);
            ul.appendChild(li);
            couleur.value = '';
           }
        }
    );

    document.getElementById("liste").addEventListener('click',
        function(e){
              document.getElementById("liste").removeChild(e.target);
        }
    );