Question

待办事项JavaScript

我需要它的代码。

当您单击“新列表”中的列表时，您将在“完成”列表中看到新列表。我不希望“完成”列表中的文本后面出现“ x”。当我从“新建列表”中关闭列表时，我想在array（var A）中添加inputvalue并删除inputvalue。该怎么办？我应该在哪里放置代码？

*{margin:0; padding:0;}

#Header{
        padding:50px;
		background-color:black;
		color:white;
	   }
	   
#myInput{
         padding:20px;
		 width:300px;
		 height:auto;
		 background-color:black;
		 color:white;
		 border:2px solid white;
		 outline:none;
		}
		
#Add{
     padding:18.5px;
	 background-color:black;
	 color:white;
	 border:2px solid white;
	 outline:none;
	 margin-left:;
	 margin-top:;
	 position:absolute;
	 cursor:pointer;
	}

#NL{
    padding:20px;
	font-family:verdana;
	font-size:12pt;
   }
   
#NL2{
     position:absolute;
	 left:400px;
	 top:160px;
	 padding:20px;
	 font-family:verdana;
	 font-size:12pt;
    }
	
#myUL{
      list-style-type:none;
	  margin:0;
	  padding:0;
	  width:400px;
	  display:flex;
	  flex-direction:column;
	  position:absolute;
	 }
	 
#myUL li{
       padding:20px 20px 10px 20px;
	   background-color:black;
	   color:white;
	   border:1px solid white;
	   opacity:0.9;
	   cursor:pointer;
	   transition:0.3s ease-in;
	  }
	  
#myUL li:nth-child(odd){
                      background-color:black;
					  color:white;
					  opacity:0.8;
					 }
					 
#myUL li:nth-child(even){
                      background-color:black;
					  color:white;
					  opacity:1;
					 }					 
					 
#myUL li.checked{
               text-decoration:line-through;
			   opacity:0.4;
               transition:0.3s ease-in-out;			   
			  }
			  
#myUL  li.checked:before{
                       content:"";
                       width:20px;
                       height:10px;
                       border-left:5px solid white;		
                       border-bottom:5px solid white;
                       position:absolute;		
                       transform:rotate(-45deg);					   
					  }
   
.sp{
    margin-left:0px;
   }
   
.checked .sp{
            margin-left:50px;
		   }
		   
#myUL .close{
            float:right;
	        padding:10px;
	        margin-top:-10px;
	        margin-right:-10px;
	        background-color:white;
	        color:black;
	        opacity:1;
	        cursor:pointer;
	       }
	  
#myUL .close:hover{
                  background-color:#2196f3;
			      color:white;
			      opacity:1;
			     }
			
#myUL2{
	   list-style-type:none;
	   margin-left:400px;
	   margin-top:0px;
	   padding:0;
	   width:400px;
	   display:flex;
	   flex-direction:column;
	   position:absolute;
	  }
	  

	 
#myUL2 li{
		padding:20px;
	    background-color:black;
	    color:white;
	    border:1px solid white;
	    opacity:0.9;
	    cursor:pointer;
	    transition:0.4s;
	   }
	  
#myUL2 li:nth-child(odd){
                       background-color:black;
					   color:white;
					   opacity:0.8;
					  }
					 
#myUL2 li:nth-child(even){
                       background-color:black;
					   color:white;
					   opacity:1;
					  }

#myUL2 li{
        text-decoration:line-through;
		opacity:0.4;
        transition:0.3s ease-in-out;			   
	   }
			  
#myUL2  li:before{
                content:"";
                width:20px;
                height:10px;
                border-left:5px solid white;		
                border-bottom:5px solid white;
                position:absolute;		
                transform:rotate(-45deg);					   
			   }
					  
.sp2{
     margin-left:50px;
    }
	
#myUL2 .close2{
              display:none;
			 }
			 
#EText{
       margin-left:60%;
	  }

<!DOCTYPE html>

<html>

<link rel="stylesheet" type="text/css" href="style.css"/>

<script src="jquery.min.js"></script>

<body>

<div id="Header">

<input type="text" placeholder=" Type your text" id="myInput"/>

<span id="Add" onclick="newElement()">Add</span>

</div>

<div id="NL">New List</div>

<ul id="myUL">

<li><span class="sp">ASQm<span class="close">&times;</span></span></li>
<li><span class="sp">ASadQm<span class="close">&times;</span></span></li>
<li><span class="sp">ASffffQm<span class="close">&times;</span></span></li>
<li><span class="sp">ASQgeryyyyyyym<span class="close">&times;</span></span></li>
<li><span class="sp">ASQgvvvvvm<span class="close">&times;</span></span></li>

</ul>

<div id="NL2">Done</div>

<ul id="myUL2">

<li><span class="sp2">ASQm<span class="close2">&times;</span></span></li>
<li><span class="sp2">ASadQm<span class="close2">&times;</span></span></li>
<li><span class="sp2">ASffffQm<span class="close2">&times;</span></span></li>
<li><span class="sp2">ASQgeryyyyyyym<span class="close2">&times;</span></span></li>
<li><span class="sp2">ASQgvvvvvm<span class="close2">&times;</span></span></li>

</ul>

<p id="EText"></p>

<script>
var input=document.getElementById("myInput");

var A=[];

var i;

var ul=document.getElementById("myUL");

var list=ul.getElementsByTagName("li");

var ul2=document.getElementById("myUL");

var list2=ul2.getElementsByTagName("li");

var etext=document.getElementById("EText");

var sp=document.getElementsByClassName("sp");

var close=document.getElementsByClassName("close");

for(i=0; i<close.length; i++){

close[i].onclick=function(){

this.parentElement.parentElement.style.display="none";

}

}


ul.addEventListener("click", function(n){

if(n.target.tagName=="LI"){

n.target.classList.toggle("checked");

}



}, false);





function newElement(){

var inputvalue=document.getElementById("myInput").value;

var i;

var createli=document.createElement("li");

var span=document.createElement("span");

span.className="sp";

var span2=document.createElement("span");

span2.className="close";

var closetext=document.createTextNode("\u00D7");

var txt=document.createTextNode(inputvalue);

if(inputvalue==""){
alert("Write something.");
}
else{

if(A.indexOf(inputvalue)>-1){
etext.innerHTML="Already exists";
}
else{

var addlist={

a: ul.appendChild(createli),
b: createli.appendChild(span),
c: span.appendChild(txt),
d: span.appendChild(span2),
e: span2.appendChild(closetext)

}

A.push(inputvalue);

etext.innerHTML="";

}




}

input.value="";

for(i=0; i<close.length; i++){

close[i].onclick=function(){

this.parentElement.parentElement.style.display="none";

}

}



for(i=0; i<list.length; i++){

list[i].onclick=function(){

var ul2=document.getElementById("myUL2");

var i;

var dcreateli=document.createElement("li");

var dspan=document.createElement("span");

dspan.className="sp2";

this.style.display="none";

var addlist2={

a: ul2.appendChild(dcreateli),
b: dcreateli.appendChild(dspan),
c: dspan.innerHTML=this.querySelector(".sp").innerHTML

}

}

}

}



for(i=0; i<list.length; i++){

list[i].onclick=function(){

var ul2=document.getElementById("myUL2");

var i;

var dcreateli=document.createElement("li");

var dspan=document.createElement("SPAN");

dspan.className="sp2";

this.style.display="none";

var addlist2={

a: ul2.appendChild(dcreateli),
b: dcreateli.appendChild(dspan),
c: dspan.innerHTML=this.querySelector(".sp").innerHTML

}

}

}
</script>

</body>

</html>

Answer 1

我不希望“完成列表”中的文本后面出现“ x”

#myUL2 span.close {
  display: none;
}

要更新数组，请检查

var input=document.getElementById("myInput");

var A=[];

var i;

var ul=document.getElementById("myUL");

var list=ul.getElementsByTagName("li");

var ul2=document.getElementById("myUL");

var list2=ul2.getElementsByTagName("li");

var etext=document.getElementById("EText");

var sp=document.getElementsByClassName("sp");

var close=document.getElementsByClassName("close");

for(i=0; i<close.length; i++){

close[i].onclick=function(){

this.parentElement.style.display="none";

}

}


ul.addEventListener("click", function(n){

if(n.target.tagName=="LI"){

n.target.classList.toggle("checked");

}



}, false);





function newElement(){

var inputvalue=document.getElementById("myInput").value;

var i;

var createli=document.createElement("li");

var span=document.createElement("span");

span.className="sp";

var span2=document.createElement("span");

span2.className="close";

var closetext=document.createTextNode("\u00D7");

var txt=document.createTextNode(inputvalue);

if(inputvalue==""){
alert("Write something.");
}
else{

if(A.indexOf(inputvalue)>-1){
etext.innerHTML="Already exists";
}
else{

var addlist={

a: ul.appendChild(createli),
b: createli.appendChild(span),
c: span.appendChild(txt),
d: createli.appendChild(span2),
e: span2.appendChild(closetext)

}

A.push(inputvalue);

etext.innerHTML="";

}




}

input.value="";

for(i=0; i<close.length; i++){

close[i].onclick=function(){

this.parentElement.style.display="none";

}

}



for(i=0; i<list.length; i++){

list[i].onclick=function(){

var ul2=document.getElementById("myUL2");

var i;

var dcreateli=document.createElement("li");

var dspan=document.createElement("span");

dspan.className="sp2";

this.style.display="none";

var addlist2={

a: ul2.appendChild(dcreateli),
b: dcreateli.appendChild(dspan),
c: dspan.innerHTML=this.querySelector(".sp").innerHTML

}
console.log(A);
// remove from array
var index = A.indexOf(this.querySelector(".sp").innerHTML);
if (index > -1) {
  A.splice(index, 1);
}
console.log(A);

}

}

}



for(i=0; i<list.length; i++){

list[i].onclick=function(){
console.log(A);
var ul2=document.getElementById("myUL2");

var i;

var dcreateli=document.createElement("li");

var dspan=document.createElement("SPAN");

dspan.className="sp2";

this.style.display="none";

var addlist2={

a: ul2.appendChild(dcreateli),
b: dcreateli.appendChild(dspan),
c: dspan.innerHTML=this.querySelector(".sp").innerHTML

}
}

}

*{margin:0; padding:0;}

#Header{
        padding:50px;
		background-color:black;
		color:white;
	   }
	   
#myInput{
         padding:20px;
		 width:300px;
		 height:auto;
		 background-color:black;
		 color:white;
		 border:2px solid white;
		 outline:none;
		}
		
#Add{
     padding:18.5px;
	 background-color:black;
	 color:white;
	 border:2px solid white;
	 outline:none;
	 margin-left:;
	 margin-top:;
	 position:absolute;
	 cursor:pointer;
	}

#NL{
    padding:20px;
	font-family:verdana;
	font-size:12pt;
   }
   
#NL2{
     position:absolute;
	 left:400px;
	 top:160px;
	 padding:20px;
	 font-family:verdana;
	 font-size:12pt;
    }
	
#myUL{
      list-style-type:none;
	  margin:0;
	  padding:0;
	  width:400px;
	  display:flex;
	  flex-direction:column;
	  position:absolute;
	 }
	 
#myUL li{
       padding:20px 20px 10px 20px;
	   background-color:black;
	   color:white;
	   border:1px solid white;
	   opacity:0.9;
	   cursor:pointer;
	   transition:0.3s ease-in;
	  }
	  
#myUL li:nth-child(odd){
                      background-color:black;
					  color:white;
					  opacity:0.8;
					 }
					 
#myUL li:nth-child(even){
                      background-color:black;
					  color:white;
					  opacity:1;
					 }					 
					 
#myUL li.checked{
               text-decoration:line-through;
			   opacity:0.4;
               transition:0.3s ease-in-out;			   
			  }
			  
#myUL  li.checked:before{
                       content:"";
                       width:20px;
                       height:10px;
                       border-left:5px solid white;		
                       border-bottom:5px solid white;
                       position:absolute;		
                       transform:rotate(-45deg);					   
					  }
   
.sp{
    margin-left:0px;
   }
   
.checked .sp{
            margin-left:50px;
		   }
		   
#myUL .close{
            float:right;
	        padding:10px;
	        margin-top:-10px;
	        margin-right:-10px;
	        background-color:white;
	        color:black;
	        opacity:1;
	        cursor:pointer;
	       }
	  
#myUL .close:hover{
                  background-color:#2196f3;
			      color:white;
			      opacity:1;
			     }
			
#myUL2{
	   list-style-type:none;
	   margin-left:400px;
	   margin-top:0px;
	   padding:0;
	   width:400px;
	   display:flex;
	   flex-direction:column;
	   position:absolute;
	  }
	  

	 
#myUL2 li{
		padding:20px;
	    background-color:black;
	    color:white;
	    border:1px solid white;
	    opacity:0.9;
	    cursor:pointer;
	    transition:0.4s;
	   }
	  
#myUL2 li:nth-child(odd){
                       background-color:black;
					   color:white;
					   opacity:0.8;
					  }
					 
#myUL2 li:nth-child(even){
                       background-color:black;
					   color:white;
					   opacity:1;
					  }

#myUL2 li{
        text-decoration:line-through;
		opacity:0.4;
        transition:0.3s ease-in-out;			   
	   }
			  
#myUL2  li:before{
                content:"";
                width:20px;
                height:10px;
                border-left:5px solid white;		
                border-bottom:5px solid white;
                position:absolute;		
                transform:rotate(-45deg);					   
			   }
					  
.sp2{
     margin-left:50px;
    }
	
#myUL2 .close2{
              display:none;
			 }
			 
#EText{
       margin-left:60%;
	  }

<!DOCTYPE html>

<html>

<link rel="stylesheet" type="text/css" href="style.css"/>

<script src="jquery.min.js"></script>

<body>

<div id="Header">

<input type="text" placeholder=" Type your text" id="myInput"/>

<span id="Add" onclick="newElement()">Add</span>

</div>

<div id="NL">New List</div>

<ul id="myUL">

<li><span class="sp">ASQm<span class="close">&times;</span></span></li>
<li><span class="sp">ASadQm<span class="close">&times;</span></span></li>
<li><span class="sp">ASffffQm<span class="close">&times;</span></span></li>
<li><span class="sp">ASQgeryyyyyyym<span class="close">&times;</span></span></li>
<li><span class="sp">ASQgvvvvvm<span class="close">&times;</span></span></li>

</ul>

<div id="NL2">Done</div>

<ul id="myUL2">

<li><span class="sp2">ASQm<span class="close2">&times;</span></span></li>
<li><span class="sp2">ASadQm<span class="close2">&times;</span></span></li>
<li><span class="sp2">ASffffQm<span class="close2">&times;</span></span></li>
<li><span class="sp2">ASQgeryyyyyyym<span class="close2">&times;</span></span></li>
<li><span class="sp2">ASQgvvvvvm<span class="close2">&times;</span></span></li>

</ul>

<p id="EText"></p>

</body>

</html>

我做了这些更改

d: createli.appendChild(span2),

this.parentElement.style.display="none";

console.log(A);
// remove from array
var index = A.indexOf(this.querySelector(".sp").innerHTML);
if (index > -1) {
  A.splice(index, 1);
}
console.log(A);

在待办事项清单-Javascript

1 个答案: