If else statement not working for to do list

问题: I'm creating a to do list and I have two ul lists, one has the id to-do and the other has the id completed. I want it so that when you create a list item and click on the t...

问题:

I'm creating a to do list and I have two ul lists, one has the id to-do and the other has the id completed. I want it so that when you create a list item and click on the tick it transfers to the completed list and when you click the tick again it transfers back to the to-do list.

However the problem right now is that when I click the tick once, it moves to the completed list but when I click it again, it doesn't do anything? You can test this by creating a few list items and then clicking the plus button.

I'm using ternary operator. What am I doing wrong?

Because this doesn't seem to be working:

var target = [id === "to-do"]
? document.getElementById("completed")
: document.getElementById("to-do");

var completeSVG =
  '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve"> <g> <path d="M38.252,15.336l-15.369,17.29l-9.259-7.407c-0.43-0.345-1.061-0.274-1.405,0.156c-0.345,0.432-0.275,1.061,0.156,1.406 l10,8C22.559,34.928,22.78,35,23,35c0.276,0,0.551-0.114,0.748-0.336l16-18c0.367-0.412,0.33-1.045-0.083-1.411 C39.251,14.885,38.62,14.922,38.252,15.336z"/> </svg>';
var removeSVG =
  '<svg version="1.1" id="Capa_1" id="removeB" class="removeB" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 328.51 328.51" style="enable-background:new 0 0 328.51 328.51;" xml:space="preserve"> <polygon points="229.044,88.858 164.255,153.647 99.466,88.858 88.858,99.466 153.647,164.255 88.858,229.044 99.466,239.651 164.255,174.862 229.044,239.651 239.651,229.044 174.862,164.255 239.651,99.466 		"/> </svg>';

function removeItem() {
  var item = this.parentNode.parentNode.parentNode;
  item.removeChild(this.parentNode.parentNode);
}

function completeItem() {
  var completeitem = this.parentNode.parentNode;
  var completeparent = completeitem.parentNode;

  var id = completeparent.id;

  var target = [id === "to-do"]
    ? document.getElementById("completed")
    : document.getElementById("to-do");

  completeparent.removeChild(completeitem);
  target.prepend(completeitem);
}

document.getElementById("button-plus").addEventListener("click", function() {
  var value = document.getElementById("input").value;
  if (value) {
    addItem(value);
    document.getElementById("input").value = "";
  }
});
function addItem(text) {
  var list = document.getElementById("to-do");

  item = document.createElement("li");
  item.innerText = text;
  var buttons = document.createElement("div");
  buttons.classList.add("buttons");

  var remove = document.createElement("button");
  remove.classList.add("remove");
  remove.innerHTML = removeSVG;
  remove.addEventListener("click", removeItem);

  var complete = document.createElement("button");
  complete.classList.add("complete");
  complete.innerHTML = completeSVG;
  complete.addEventListener("click", completeItem);

  buttons.appendChild(remove);
  buttons.appendChild(complete);
  item.appendChild(buttons);

  list.prepend(item);
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 70px;
  background: rgb(162, 193, 60);
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  box-shadow: 0 0 5px rgb(159, 160, 155);
  padding: 0 10px 0 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

header input {
 appearance: none;
 text-indent: 10px;
 border-bottom-right-radius: 25px;
 border-top-right-radius: 25px;
 border-top-left-radius: 12px;
 border-bottom-left-radius: 12px;
 width: 100%;
 background: rgb(233, 255, 170);
 height: 45px;
 font-family: Century Gothic;
 border: none;
 box-sizing: border-box;
 padding-right: 60px;
}

header button {
position: absolute;
right: 10px;
top: 13.5px;
height: 43px;
width: 50px;
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
appearance: none;
border: none;
background: rgb(238, 255, 173);
border-left: 2px solid rgb(162, 193, 60);
cursor: pointer;
}

button svg {
z-index: 6;
position: absolute;
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
right: 0;
top: -1px;
}/*
.container{
  width: 100%;
  margin: auto;
  border: 1px solid black;
}*/
 .to-do {
  width: 100%;
  float: left;
  list-style-type: none;
   box-sizing: border-box;
   padding: 0;
  /*border: 1px lid black;*/
}
.to-do li{
  width: 85%;
  background: white;
  box-shadow: 0 0 5px rgb(159, 160, 155, 0.5);
  min-height: 50px;
  margin: auto;
  border-radius: 5px;
  box-sizing: border-box;
  font-family: Century Gothic;
  padding: 0 105px 0 25px;
  position: relative;
  margin-top: 25px;
  display: flex;
  align-items: center;
  
}
.to-do li .buttons{
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 100px;
  background: white;
}
.to-do li .buttons button{
  appearance: none;
  width: 47.5px;
  height: 50px;
  box-sizing: border-box;
  position: relative;
  background: white;
  border: none;
  cursor: pointer;
}
.to-do li .buttons button:last-of-type:before{
  content: '';
  width: 0.8px;
  height: 29px;
  background: gray;
  opacity: 0.4;
  float: left;
  margin-left: -6px;
}/*
.to-do li button:nth-child(1):hover .x-fill{
  fill: red;
  transition-duration: 0.3s;
}
.to-do li button:nth-child(2):hover .tick-fill{
  fill: orange;
  transition-duration: 0.3s;
}*/
.complete svg{
  fill: green;
}
.complete svg:hover{
  fill: orange;
  transition-duration: 0.3s;
}
.remove svg{
  fill: gray;
  opacity: 0.8;
}
.remove svg:hover{
  fill: red;
  opacity: 0.7;
  transition-duration: 0.3s;
}
#completed{
  margin-top: 25px;
}
<head>

<title>To do List App</title>

</head>
<body>
<header>
  <input type="text" placeholder="Next on my to do list is...." id="input">
  <button id="button-plus">
 <svg width="48" height="43" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <rect fill="#0186b2" height="28" id="svg_1" stroke="#000000" stroke-opacity="0" stroke-width="5" width="4" x="19.5" y="8.5"/>
  <rect fill="#47bcbc" height="3" id="svg_2" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="0" stroke-width="5" width="28" x="7.5" y="20.5"/>
</svg>
   
    </svg>
  </button>
</header>
  <div class="container">
<ul id="to-do" class="to-do">
  </ul>
    <ul id="completed" class="to-do">
      
    </ul>
  </div>
  
</body>


回答1:

You have to use ternary operator like (condition)?true:false not like [condition]?true:false

var completeSVG =
  '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve"> <g> <path d="M38.252,15.336l-15.369,17.29l-9.259-7.407c-0.43-0.345-1.061-0.274-1.405,0.156c-0.345,0.432-0.275,1.061,0.156,1.406 l10,8C22.559,34.928,22.78,35,23,35c0.276,0,0.551-0.114,0.748-0.336l16-18c0.367-0.412,0.33-1.045-0.083-1.411 C39.251,14.885,38.62,14.922,38.252,15.336z"/> </svg>';
var removeSVG =
  '<svg version="1.1" id="Capa_1" id="removeB" class="removeB" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 328.51 328.51" style="enable-background:new 0 0 328.51 328.51;" xml:space="preserve"> <polygon points="229.044,88.858 164.255,153.647 99.466,88.858 88.858,99.466 153.647,164.255 88.858,229.044 99.466,239.651 164.255,174.862 229.044,239.651 239.651,229.044 174.862,164.255 239.651,99.466 		"/> </svg>';

function removeItem() {
  var item = this.parentNode.parentNode.parentNode;
  item.removeChild(this.parentNode.parentNode);
}

function completeItem() {
  var completeitem = this.parentNode.parentNode;
  var completeparent = completeitem.parentNode;

  var id = completeparent.id;
    debugger;
  var target = (id === "to-do")
    ? document.getElementById("completed")
    : document.getElementById("to-do");

  completeparent.removeChild(completeitem);
  target.prepend(completeitem);
}

document.getElementById("button-plus").addEventListener("click", function() {
  var value = document.getElementById("input").value;
  if (value) {
    addItem(value);
    document.getElementById("input").value = "";
  }
});
function addItem(text) {
  var list = document.getElementById("to-do");

  item = document.createElement("li");
  item.innerText = text;
  var buttons = document.createElement("div");
  buttons.classList.add("buttons");

  var remove = document.createElement("button");
  remove.classList.add("remove");
  remove.innerHTML = removeSVG;
  remove.addEventListener("click", removeItem);

  var complete = document.createElement("button");
  complete.classList.add("complete");
  complete.innerHTML = completeSVG;
  complete.addEventListener("click", completeItem);

  buttons.appendChild(remove);
  buttons.appendChild(complete);
  item.appendChild(buttons);

  list.prepend(item);
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 70px;
  background: rgb(162, 193, 60);
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  box-shadow: 0 0 5px rgb(159, 160, 155);
  padding: 0 10px 0 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

header input {
 appearance: none;
 text-indent: 10px;
 border-bottom-right-radius: 25px;
 border-top-right-radius: 25px;
 border-top-left-radius: 12px;
 border-bottom-left-radius: 12px;
 width: 100%;
 background: rgb(233, 255, 170);
 height: 45px;
 font-family: Century Gothic;
 border: none;
 box-sizing: border-box;
 padding-right: 60px;
}

header button {
position: absolute;
right: 10px;
top: 13.5px;
height: 43px;
width: 50px;
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
appearance: none;
border: none;
background: rgb(238, 255, 173);
border-left: 2px solid rgb(162, 193, 60);
cursor: pointer;
}

button svg {
z-index: 6;
position: absolute;
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
right: 0;
top: -1px;
}/*
.container{
  width: 100%;
  margin: auto;
  border: 1px solid black;
}*/
 .to-do {
  width: 100%;
  float: left;
  list-style-type: none;
   box-sizing: border-box;
   padding: 0;
  /*border: 1px lid black;*/
}
.to-do li{
  width: 85%;
  background: white;
  box-shadow: 0 0 5px rgb(159, 160, 155, 0.5);
  min-height: 50px;
  margin: auto;
  border-radius: 5px;
  box-sizing: border-box;
  font-family: Century Gothic;
  padding: 0 105px 0 25px;
  position: relative;
  margin-top: 25px;
  display: flex;
  align-items: center;
  
}
.to-do li .buttons{
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 100px;
  background: white;
}
.to-do li .buttons button{
  appearance: none;
  width: 47.5px;
  height: 50px;
  box-sizing: border-box;
  position: relative;
  background: white;
  border: none;
  cursor: pointer;
}
.to-do li .buttons button:last-of-type:before{
  content: '';
  width: 0.8px;
  height: 29px;
  background: gray;
  opacity: 0.4;
  float: left;
  margin-left: -6px;
}/*
.to-do li button:nth-child(1):hover .x-fill{
  fill: red;
  transition-duration: 0.3s;
}
.to-do li button:nth-child(2):hover .tick-fill{
  fill: orange;
  transition-duration: 0.3s;
}*/
.complete svg{
  fill: green;
}
.complete svg:hover{
  fill: orange;
  transition-duration: 0.3s;
}
.remove svg{
  fill: gray;
  opacity: 0.8;
}
.remove svg:hover{
  fill: red;
  opacity: 0.7;
  transition-duration: 0.3s;
}
#completed{
  margin-top: 25px;
}
<head>

<title>To do List App</title>

</head>
<body>
<header>
  <input type="text" placeholder="Next on my to do list is...." id="input">
  <button id="button-plus">
 <svg width="48" height="43" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <rect fill="#0186b2" height="28" id="svg_1" stroke="#000000" stroke-opacity="0" stroke-width="5" width="4" x="19.5" y="8.5"/>
  <rect fill="#47bcbc" height="3" id="svg_2" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="0" stroke-width="5" width="28" x="7.5" y="20.5"/>
</svg>
   
    </svg>
  </button>
</header>
  <div class="container">
<ul id="to-do" class="to-do">
  </ul>
    <ul id="completed" class="to-do">
      
    </ul>
  </div>
  
</body>


回答2:

Why have you wrapped this in []. In this case it return '[false]' wich is a true statement. You should simply remove '[]' like this:

  var target = id === "to-do"
    ? document.getElementById("completed")
    : document.getElementById("to-do");

If target must be an array, you can assign that value later or do this:

  var target = id === "to-do"
    ? [document.getElementById("completed")]
    : [document.getElementById("to-do")];

回答3:

the ternary operator work like this. (a < b) ? a : b;

not like this [a < b] ? a : b;

var target = [id === "to-do"]
? document.getElementById("completed")
: document.getElementById("to-do");

your code should be like this.

var target = (id === "to-do")? document.getElementById("completed"): document.getElementById("to-do");

回答4:

var completeSVG =
  '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve"> <g> <path d="M38.252,15.336l-15.369,17.29l-9.259-7.407c-0.43-0.345-1.061-0.274-1.405,0.156c-0.345,0.432-0.275,1.061,0.156,1.406 l10,8C22.559,34.928,22.78,35,23,35c0.276,0,0.551-0.114,0.748-0.336l16-18c0.367-0.412,0.33-1.045-0.083-1.411 C39.251,14.885,38.62,14.922,38.252,15.336z"/> </svg>';
var removeSVG =
  '<svg version="1.1" id="Capa_1" id="removeB" class="removeB" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 328.51 328.51" style="enable-background:new 0 0 328.51 328.51;" xml:space="preserve"> <polygon points="229.044,88.858 164.255,153.647 99.466,88.858 88.858,99.466 153.647,164.255 88.858,229.044 99.466,239.651 164.255,174.862 229.044,239.651 239.651,229.044 174.862,164.255 239.651,99.466 		"/> </svg>';

function removeItem() {
  var item = this.parentNode.parentNode.parentNode;
  item.removeChild(this.parentNode.parentNode);
}

function completeItem() {

  var completeitem = this.parentNode.parentNode;

  var completeparent = completeitem.parentNode;

  var id = completeparent.id;

  var target = id === "to-do"
    ? document.getElementById("completed")
    : document.getElementById("to-do");

  completeparent.removeChild(completeitem);
  target.prepend(completeitem);
}

document.getElementById("button-plus").addEventListener("click", function() {
  var value = document.getElementById("input").value;
  if (value) {
    addItem(value);
    document.getElementById("input").value = "";
  }
});
function addItem(text) {
  var list = document.getElementById("to-do");

  item = document.createElement("li");
  item.innerText = text;
  var buttons = document.createElement("div");
  buttons.classList.add("buttons");

  var remove = document.createElement("button");
  remove.classList.add("remove");
  remove.innerHTML = removeSVG;
  remove.addEventListener("click", removeItem);

  var complete = document.createElement("button");
  complete.classList.add("complete");
  complete.innerHTML = completeSVG;
  complete.addEventListener("click", completeItem);

  buttons.appendChild(remove);
  buttons.appendChild(complete);
  item.appendChild(buttons);

  list.prepend(item);
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 70px;
  background: rgb(162, 193, 60);
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  box-shadow: 0 0 5px rgb(159, 160, 155);
  padding: 0 10px 0 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

header input {
 appearance: none;
 text-indent: 10px;
 border-bottom-right-radius: 25px;
 border-top-right-radius: 25px;
 border-top-left-radius: 12px;
 border-bottom-left-radius: 12px;
 width: 100%;
 background: rgb(233, 255, 170);
 height: 45px;
 font-family: Century Gothic;
 border: none;
 box-sizing: border-box;
 padding-right: 60px;
}

header button {
position: absolute;
right: 10px;
top: 13.5px;
height: 43px;
width: 50px;
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
appearance: none;
border: none;
background: rgb(238, 255, 173);
border-left: 2px solid rgb(162, 193, 60);
cursor: pointer;
}

button svg {
z-index: 6;
position: absolute;
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
right: 0;
top: -1px;
}/*
.container{
  width: 100%;
  margin: auto;
  border: 1px solid black;
}*/
 .to-do {
  width: 100%;
  float: left;
  list-style-type: none;
   box-sizing: border-box;
   padding: 0;
  /*border: 1px lid black;*/
}
.to-do li{
  width: 85%;
  background: white;
  box-shadow: 0 0 5px rgb(159, 160, 155, 0.5);
  min-height: 50px;
  margin: auto;
  border-radius: 5px;
  box-sizing: border-box;
  font-family: Century Gothic;
  padding: 0 105px 0 25px;
  position: relative;
  margin-top: 25px;
  display: flex;
  align-items: center;
  
}
.to-do li .buttons{
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 100px;
  background: white;
}
.to-do li .buttons button{
  appearance: none;
  width: 47.5px;
  height: 50px;
  box-sizing: border-box;
  position: relative;
  background: white;
  border: none;
  cursor: pointer;
}
.to-do li .buttons button:last-of-type:before{
  content: '';
  width: 0.8px;
  height: 29px;
  background: gray;
  opacity: 0.4;
  float: left;
  margin-left: -6px;
}/*
.to-do li button:nth-child(1):hover .x-fill{
  fill: red;
  transition-duration: 0.3s;
}
.to-do li button:nth-child(2):hover .tick-fill{
  fill: orange;
  transition-duration: 0.3s;
}*/
.complete svg{
  fill: green;
}
.complete svg:hover{
  fill: orange;
  transition-duration: 0.3s;
}
.remove svg{
  fill: gray;
  opacity: 0.8;
}
.remove svg:hover{
  fill: red;
  opacity: 0.7;
  transition-duration: 0.3s;
}
#completed{
  margin-top: 25px;
}
<head>

<title>To do List App</title>

</head>
<body>
<header>
  <input type="text" placeholder="Next on my to do list is...." id="input">
  <button id="button-plus">
 <svg width="48" height="43" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <rect fill="#0186b2" height="28" id="svg_1" stroke="#000000" stroke-opacity="0" stroke-width="5" width="4" x="19.5" y="8.5"/>
  <rect fill="#47bcbc" height="3" id="svg_2" stroke="#000000" stroke-dasharray="null" stroke-linecap="null" stroke-linejoin="null" stroke-opacity="0" stroke-width="5" width="28" x="7.5" y="20.5"/>
</svg>
   
    </svg>
  </button>
</header>
  <div class="container">
<ul id="to-do" class="to-do">
      <li>To Do</li>
  </ul>
    <ul id="completed" class="to-do">
        <li>Completed</li>
    </ul>
  </div>
  
</body>

  • 发表于 2019-07-07 04:52
  • 阅读 ( 159 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除