skip to Main Content

I’m making a todolist that add item when I click on add button. For the first time I click the item, The item is expected to have line-through when I click one time on it. However, I need to double click to have line-through. When I click again to remove line-through and click again, only need one click to have line-through. I don’t know where I went wrong. Please help me!

const addButton = document.getElementById("add_but");
const input = document.getElementsByTagName("input");
addButton.addEventListener("click", getText);
function getText() {
  //add item
  const item = document.createElement("div");
  item.classList.add("item");
  //add mark and text
  const markandText = document.createElement("div");
  markandText.classList.add("markandText");
  // add text
  const to_do_text = document.createElement("span");
  to_do_text.classList.add("to_do_text");
  // add markicon
  const markIcon = document.createElement("span");
  markIcon.classList.add("markIcon");
  markIcon.innerHTML = "✓";
  //add text and markicon to markandtext
  markandText.appendChild(to_do_text);
  markandText.appendChild(markIcon);
  // add button
  const delButton = document.createElement("button");
  delButton.classList.add("del_but");
  delButton.innerHTML = "&#10005";
  // add markandText and button to item
  item.appendChild(markandText);
  item.appendChild(delButton);
  const items = document.getElementById("items");

  // add item to items
  items.appendChild(item);
  if (input[0].value != "") {
    item.style.visibility = "visible";
    to_do_text.innerHTML = input[0].value;
  }
  item.addEventListener("click", addStrike);

  delButton.addEventListener("click", delFunc);
  function addStrike() {
    if (markIcon.style.visibility == "hidden") {
      markIcon.style.visibility = "visible";
      item.style.backgroundColor = "#888888";
      to_do_text.classList.add("to_do_text_on");
      delButton.classList.add("del_but_on");
    } else {
      markIcon.style.visibility = "hidden";
      to_do_text.classList.remove("to_do_text_on");
      delButton.classList.remove("del_but_on");
      item.style.backgroundColor = "white";
    }
  }
  function delFunc() {
    item.style.display = "none";
  }
}
body {
  padding: 0;
  /* margin: 0; */
  /* box-sizing: border-box; */
  font-family: "Courier New", Courier, monospace;
  text-align: center;
}
.list {
  width: 80%;
  margin: 0 auto;
}
.head {
  background: #f44336;
  margin-top: 50px;
  padding: 50px 0;
}
.title {
  color: white;
  font-size: 36px;
}
#add_bar {
  display: flex;
  justify-content: center;
}
input {
  padding: 10px;
  width: 70%;
  border: none;
}
#add_but {
  padding: 10px;
  width: 140px;
  border: none;
  background-color: #d9d9d9;
}
button:hover {
  cursor: pointer;
}
#items {
  display: flex;
  /* justify-content: center; */
  flex-direction: column;
}
.item {
  display: flex;
  justify-content: space-between;
  border: 1px solid #000;
  /* padding: 10px; */
  visibility: hidden;
}
.markandText {
  display: flex;
}
.to_do_text {
  background: white;
  color: black;
  /* float: left; */
  order: 2;
  padding: 12px 0;
}
.to_do_text_on {
  background: #888888;
  color: white;
  text-decoration-line: line-through;
  text-decoration-color: white;
}
.del_but {
  /* float: right; */
  order: 3;
  padding: 12px;
  color: #929b7b;
  background-color: white;
  border-radius: 0;
  border: none;
}
.del_but_on {
  color: #E4E1EC;
  background-color: #888888;
}
.del_but:hover {
  background: #f44336;
  color: white;
}
.item:hover {
  cursor: pointer;
}
.markIcon {
  order: 1;
  padding: 12px;
  color: white;
  visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="list">
      <div class="head">
        <p class="title">My To Do List</p>
        <div id="add_bar">
          <input type="text" placeholder="Title..." />
          <button id="add_but">Add</button>
        </div>
      </div>
      <div id="items">
        <!-- <div class="item">
          <span class="to_do_text">egg</span>
          <button class="del_but">x</button>
        </div> -->
      </div>
    </div>
    <script src="js.js"></script>
  </body>
</html>

2

Answers


  1. if (markIcon.style.visibility == "hidden")
    

    This will attempt to read the style set on an element, which does not include the style set in your CSS. So this condition will always be false the first time around unless you were to set the style when creating the span.

    // add markicon
    const markIcon = document.createElement("span");
    markIcon.classList.add("markIcon");
    markIcon.style.visibility = 'hidden';
    

    If you don’t want to set the visibility style, you could also just change the order of your if statement to check against the value visible first and put the hidden state logic in the else statement

    Login or Signup to reply.
  2. const addButton = document.getElementById("add_but");
    const input = document.getElementsByTagName("input");
    addButton.addEventListener("click", getText);
    function getText() {
      //add item
      const item = document.createElement("div");
      item.classList.add("item");
      //add mark and text
      const markandText = document.createElement("div");
      markandText.classList.add("markandText");
      // add text
      const to_do_text = document.createElement("span");
      to_do_text.classList.add("to_do_text");
      // add markicon
      const markIcon = document.createElement("span");
      markIcon.classList.add("markIcon");
      markIcon.innerHTML = "&#10003;";
      //add text and markicon to markandtext
      markandText.appendChild(to_do_text);
      markandText.appendChild(markIcon);
      // add button
      const delButton = document.createElement("button");
      delButton.classList.add("del_but");
      delButton.innerHTML = "&#10005";
      // add markandText and button to item
      item.appendChild(markandText);
      item.appendChild(delButton);
      const items = document.getElementById("items");
    
      // add item to items
      items.appendChild(item);
      if (input[0].value != "") {
        item.style.visibility = "visible";
        to_do_text.innerHTML = input[0].value;
      }
      item.addEventListener("click", addStrike);
    
      delButton.addEventListener("dblclick", delFunc);
      function addStrike() {
        if (markIcon.style.visibility == "" || markIcon.style.visibility == "hidden") {
          markIcon.style.visibility = "visible";
          item.style.backgroundColor = "#888888";
          to_do_text.classList.add("to_do_text_on");
          delButton.classList.add("del_but_on");
        } else {
          markIcon.style.visibility = "hidden";
          to_do_text.classList.remove("to_do_text_on");
          delButton.classList.remove("del_but_on");
          item.style.backgroundColor = "white";
        }
      }
      function delFunc() {
        item.style.display = "none";
      }
    }
    body {
      padding: 0;
      /* margin: 0; */
      /* box-sizing: border-box; */
      font-family: "Courier New", Courier, monospace;
      text-align: center;
    }
    .list {
      width: 80%;
      margin: 0 auto;
    }
    .head {
      background: #f44336;
      margin-top: 50px;
      padding: 50px 0;
    }
    .title {
      color: white;
      font-size: 36px;
    }
    #add_bar {
      display: flex;
      justify-content: center;
    }
    input {
      padding: 10px;
      width: 70%;
      border: none;
    }
    #add_but {
      padding: 10px;
      width: 140px;
      border: none;
      background-color: #d9d9d9;
    }
    button:hover {
      cursor: pointer;
    }
    #items {
      display: flex;
      /* justify-content: center; */
      flex-direction: column;
    }
    .item {
      display: flex;
      justify-content: space-between;
      border: 1px solid #000;
      /* padding: 10px; */
      visibility: hidden;
    }
    .markandText {
      display: flex;
    }
    .to_do_text {
      background: white;
      color: black;
      /* float: left; */
      order: 2;
      padding: 12px 0;
    }
    .to_do_text_on {
      background: #888888;
      color: white;
      text-decoration-line: line-through;
      text-decoration-color: white;
    }
    .del_but {
      /* float: right; */
      order: 3;
      padding: 12px;
      color: #929b7b;
      background-color: white;
      border-radius: 0;
      border: none;
    }
    .del_but_on {
      color: #E4E1EC;
      background-color: #888888;
    }
    .del_but:hover {
      background: #f44336;
      color: white;
    }
    .item:hover {
      cursor: pointer;
    }
    .markIcon {
      order: 1;
      padding: 12px;
      color: white;
      visibility: hidden;
    }
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>
        <div class="list">
          <div class="head">
            <p class="title">My To Do List</p>
            <div id="add_bar">
              <input type="text" placeholder="Title..." />
              <button id="add_but">Add</button>
            </div>
          </div>
          <div id="items">
            <!-- <div class="item">
              <span class="to_do_text">egg</span>
              <button class="del_but">x</button>
            </div> -->
          </div>
        </div>
        <script src="js.js"></script>
      </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search