显示/隐藏点击纯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代码。任何人都可以请建议为什么这个代码无法正常工作或者有更好的方法来完成这个任务
答
您已将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();
}
});
似乎工作,除非我不明白究竟是不... – GolezTrol
它根本不工作的一部分,我已经检查了控制台,但没有错误或警告。 – Manu
尝试在onload函数中添加代码 – vinayakj