顯示/隱藏點擊純div div

Question

我有JavaScript代碼不起作用。我想要的是非常簡單的，當父母被點擊時，我想顯示/隱藏小孩div。但我想在純JavaScript中使用它，而不使用jQuery或任何其他庫。這裏是我的JavaScript代碼：

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代碼。任何人都可以請建議爲什麼這個代碼無法正常工作或者有更好的方法來完成這個任務

Answer 1

您已將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(); 
    } 
});