显示/隐藏点击纯div div

我有JavaScript代码不起作用。我想要的是非常简单的，当父母被点击时，我想显示/隐藏小孩div。但我想在纯JavaScript中使用它，而不使用jQuery或任何其他库。这里是我的JavaScript代码：显示/隐藏点击纯div div

function addCal(){ 
 

 
\t var inDate=document.getElementById("date_in"); 
 
\t if(inDate.childNodes.length<2) 
 
\t { 
 
     var inCal= document.createElement("div"); 
 
     inCal.id="inCal"; 
 
     var inText= document.createTextNode("Hello"); 
 
     inCal.appendChild(inText); 
 
     inDate.appendChild(inCal); 
 

 
     } else 
 
     { 
 
\t  return false; 
 
     } 
 

 
    } 
 

 
    function removeCal(){ 
 

 
\t var inCal=document.getElementById("inCal"); 
 

 
\t if(inCal) 
 
\t { 
 
\t \t inCal.parentNode.removeChild(inCal); 
 
\t } else 
 
\t { 
 
\t \t return false; 
 
\t } 
 

 
    } 
 
    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代码。任何人都可以请建议为什么这个代码无法正常工作或者有更好的方法来完成这个任务

来源

2015-06-21 Manu

似乎工作，除非我不明白究竟是不... – GolezTrol

它根本不工作的一部分，我已经检查了控制台，但没有错误或警告。 – Manu

尝试在onload函数中添加代码 – vinayakj

您已将addCal和removeCal作为侦听器添加到同一事件中。点击后，addCal将被调用，removeCal将撤销之后立即执行的操作。考虑添加一个侦听器，根据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(); 
    } 
});

来源

2015-06-21 20:56:09 Ryan

显示/隐藏点击纯div div

回答

相关问题