在纯JavaScript上显示/隐藏div

Question

我的JavaScript代码无法正常工作。 我想要的非常简单，我想在单击父项时显示/隐藏子div。 但是我想用纯JavaScript而不使用jQuery或任何其他库来实现。 这是我的JavaScript代码：

  function addCal(){ var inDate=document.getElementById("date_in"); if(inDate.childNodes.length<2) { var inCal= document.createElement("div"); inCal.id="inCal"; var inText= document.createTextNode("Hello"); inCal.appendChild(inText); inDate.appendChild(inCal); } else { return false; } } function removeCal(){ var inCal=document.getElementById("inCal"); if(inCal) { inCal.parentNode.removeChild(inCal); } else { return false; } } document.getElementById("date_in").addEventListener("click", addCal); document.getElementById("date_in").addEventListener("click",removeCal); 

  <div id="date_in"><input type="date" name="date_in"/></div> <div id="dat_out"><input type="date" name="date_out"/></div> <div id="submit"><input type="submit" value="Submit"/> 

我已将JavaScript代码放置在结束body标签附近。 任何人都可以提出该代码为什么不起作用或实现此目的的更好方法的建议。

Answer 1

您已将addCal和removeCal添加为同一事件的侦听器。 点击后， addCal将被调用，并removeCal将撤销它立即做了之后。 考虑添加一个侦听器，该侦听器根据inCal的存在来决定要调用的inCal 。

function addCal() {
    var inDate = document.getElementById("date_in");
    var inCal = document.createElement("div");
    inCal.id = "inCal";
    var inText = document.createTextNode("Hello");
    inCal.appendChild(inText);
    inDate.appendChild(inCal);
}

function removeCal() {
    var inCal = document.getElementById("inCal");
    inCal.parentNode.removeChild(inCal);
}

document.getElementById("date_in").addEventListener("click", function () {
    var inCal = document.getElementById("inCal");

    if (inCal) {
        removeCal();
    } else {
        addCal();
    }
});