javascript todolist需要双击到线通过项目

0kjbasz6  于 2023-09-29  发布在  Java
关注(0)|答案(2)|浏览(133)

我做了一个todolist添加项目时，我点击添加按钮。对于我第一次单击该项目，当我单击该项目一次时，该项目将具有直通。但是，我需要双击才能通过行。当我再次点击删除线通过和再次点击，只需要一次点击有线通过。我不知道我哪里做错了。请救救我！

  1. const addButton = document.getElementById("add_but");
  2. const input = document.getElementsByTagName("input");
  3. addButton.addEventListener("click", getText);
  4. function getText() {
  5.   //add item
  6.   const item = document.createElement("div");
  7.   item.classList.add("item");
  8.   //add mark and text
  9.   const markandText = document.createElement("div");
  10.   markandText.classList.add("markandText");
  11.   // add text
  12.   const to_do_text = document.createElement("span");
  13.   to_do_text.classList.add("to_do_text");
  14.   // add markicon
  15.   const markIcon = document.createElement("span");
  16.   markIcon.classList.add("markIcon");
  17.   markIcon.innerHTML = "✓";
  18.   //add text and markicon to markandtext
  19.   markandText.appendChild(to_do_text);
  20.   markandText.appendChild(markIcon);
  21.   // add button
  22.   const delButton = document.createElement("button");
  23.   delButton.classList.add("del_but");
  24.   delButton.innerHTML = "&#10005";
  25.   // add markandText and button to item
  26.   item.appendChild(markandText);
  27.   item.appendChild(delButton);
  28.   const items = document.getElementById("items");
  30.   // add item to items
  31.   items.appendChild(item);
  32.   if (input[0].value != "") {
  33.     item.style.visibility = "visible";
  34.     to_do_text.innerHTML = input[0].value;
  35.   }
  36.   item.addEventListener("click", addStrike);
  38.   delButton.addEventListener("click", delFunc);
  39.   function addStrike() {
  40.     if (markIcon.style.visibility == "hidden") {
  41.       markIcon.style.visibility = "visible";
  42.       item.style.backgroundColor = "#888888";
  43.       to_do_text.classList.add("to_do_text_on");
  44.       delButton.classList.add("del_but_on");
  45.     } else {
  46.       markIcon.style.visibility = "hidden";
  47.       to_do_text.classList.remove("to_do_text_on");
  48.       delButton.classList.remove("del_but_on");
  49.       item.style.backgroundColor = "white";
  50.     }
  51.   }
  52.   function delFunc() {
  53.     item.style.display = "none";
  54.   }
  55. }
  1. body {
  2.   padding: 0;
  3.   /* margin: 0; */
  4.   /* box-sizing: border-box; */
  5.   font-family: "Courier New", Courier, monospace;
  6.   text-align: center;
  7. }
  8. .list {
  9.   width: 80%;
  10.   margin: 0 auto;
  11. }
  12. .head {
  13.   background: #f44336;
  14.   margin-top: 50px;
  15.   padding: 50px 0;
  16. }
  17. .title {
  18.   color: white;
  19.   font-size: 36px;
  20. }
  21. #add_bar {
  22.   display: flex;
  23.   justify-content: center;
  24. }
  25. input {
  26.   padding: 10px;
  27.   width: 70%;
  28.   border: none;
  29. }
  30. #add_but {
  31.   padding: 10px;
  32.   width: 140px;
  33.   border: none;
  34.   background-color: #d9d9d9;
  35. }
  36. button:hover {
  37.   cursor: pointer;
  38. }
  39. #items {
  40.   display: flex;
  41.   /* justify-content: center; */
  42.   flex-direction: column;
  43. }
  44. .item {
  45.   display: flex;
  46.   justify-content: space-between;
  47.   border: 1px solid #000;
  48.   /* padding: 10px; */
  49.   visibility: hidden;
  50. }
  51. .markandText {
  52.   display: flex;
  53. }
  54. .to_do_text {
  55.   background: white;
  56.   color: black;
  57.   /* float: left; */
  58.   order: 2;
  59.   padding: 12px 0;
  60. }
  61. .to_do_text_on {
  62.   background: #888888;
  63.   color: white;
  64.   text-decoration-line: line-through;
  65.   text-decoration-color: white;
  66. }
  67. .del_but {
  68.   /* float: right; */
  69.   order: 3;
  70.   padding: 12px;
  71.   color: #929b7b;
  72.   background-color: white;
  73.   border-radius: 0;
  74.   border: none;
  75. }
  76. .del_but_on {
  77.   color: #E4E1EC;
  78.   background-color: #888888;
  79. }
  80. .del_but:hover {
  81.   background: #f44336;
  82.   color: white;
  83. }
  84. .item:hover {
  85.   cursor: pointer;
  86. }
  87. .markIcon {
  88.   order: 1;
  89.   padding: 12px;
  90.   color: white;
  91.   visibility: hidden;
  92. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <link rel="stylesheet" href="style.css" />
  8.   </head>
  9.   <body>
  10.     <div class="list">
  11.       <div class="head">
  12.         <p class="title">My To Do List</p>
  13.         <div id="add_bar">
  14.           <input type="text" placeholder="Title..." />
  15.           <button id="add_but">Add</button>
  16.         </div>
  17.       </div>
  18.       <div id="items">
  19.         <!-- <div class="item">
  20.           <span class="to_do_text">egg</span>
  21.           <button class="del_but">x</button>
  22.         </div> -->
  23.       </div>
  24.     </div>
  25.     <script src="js.js"></script>
  26.   </body>
  27. </html>
JavaScript

2条答案

按热度按时间
flseospp

flseospp1#

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

这将尝试读取元素上的样式集，该元素不包括CSS中的样式集。因此，除非在创建跨度时设置样式，否则此条件在第一次使用时将始终为false。

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

如果不想设置可见性样式，也可以更改if语句的顺序，首先检查值visible，然后将隐藏的状态逻辑放在else语句中

赞(0）分享  回复(0）举报  2023-09-29
iugsix8n

iugsix8n2#

  1. const addButton = document.getElementById("add_but");
  2. const input = document.getElementsByTagName("input");
  3. addButton.addEventListener("click", getText);
  4. function getText() {
  5.   //add item
  6.   const item = document.createElement("div");
  7.   item.classList.add("item");
  8.   //add mark and text
  9.   const markandText = document.createElement("div");
  10.   markandText.classList.add("markandText");
  11.   // add text
  12.   const to_do_text = document.createElement("span");
  13.   to_do_text.classList.add("to_do_text");
  14.   // add markicon
  15.   const markIcon = document.createElement("span");
  16.   markIcon.classList.add("markIcon");
  17.   markIcon.innerHTML = "&#10003;";
  18.   //add text and markicon to markandtext
  19.   markandText.appendChild(to_do_text);
  20.   markandText.appendChild(markIcon);
  21.   // add button
  22.   const delButton = document.createElement("button");
  23.   delButton.classList.add("del_but");
  24.   delButton.innerHTML = "&#10005";
  25.   // add markandText and button to item
  26.   item.appendChild(markandText);
  27.   item.appendChild(delButton);
  28.   const items = document.getElementById("items");
  30.   // add item to items
  31.   items.appendChild(item);
  32.   if (input[0].value != "") {
  33.     item.style.visibility = "visible";
  34.     to_do_text.innerHTML = input[0].value;
  35.   }
  36.   item.addEventListener("click", addStrike);
  38.   delButton.addEventListener("dblclick", delFunc);
  39.   function addStrike() {
  40.     if (markIcon.style.visibility == "" || markIcon.style.visibility == "hidden") {
  41.       markIcon.style.visibility = "visible";
  42.       item.style.backgroundColor = "#888888";
  43.       to_do_text.classList.add("to_do_text_on");
  44.       delButton.classList.add("del_but_on");
  45.     } else {
  46.       markIcon.style.visibility = "hidden";
  47.       to_do_text.classList.remove("to_do_text_on");
  48.       delButton.classList.remove("del_but_on");
  49.       item.style.backgroundColor = "white";
  50.     }
  51.   }
  52.   function delFunc() {
  53.     item.style.display = "none";
  54.   }
  55. }
  1. body {
  2.   padding: 0;
  3.   /* margin: 0; */
  4.   /* box-sizing: border-box; */
  5.   font-family: "Courier New", Courier, monospace;
  6.   text-align: center;
  7. }
  8. .list {
  9.   width: 80%;
  10.   margin: 0 auto;
  11. }
  12. .head {
  13.   background: #f44336;
  14.   margin-top: 50px;
  15.   padding: 50px 0;
  16. }
  17. .title {
  18.   color: white;
  19.   font-size: 36px;
  20. }
  21. #add_bar {
  22.   display: flex;
  23.   justify-content: center;
  24. }
  25. input {
  26.   padding: 10px;
  27.   width: 70%;
  28.   border: none;
  29. }
  30. #add_but {
  31.   padding: 10px;
  32.   width: 140px;
  33.   border: none;
  34.   background-color: #d9d9d9;
  35. }
  36. button:hover {
  37.   cursor: pointer;
  38. }
  39. #items {
  40.   display: flex;
  41.   /* justify-content: center; */
  42.   flex-direction: column;
  43. }
  44. .item {
  45.   display: flex;
  46.   justify-content: space-between;
  47.   border: 1px solid #000;
  48.   /* padding: 10px; */
  49.   visibility: hidden;
  50. }
  51. .markandText {
  52.   display: flex;
  53. }
  54. .to_do_text {
  55.   background: white;
  56.   color: black;
  57.   /* float: left; */
  58.   order: 2;
  59.   padding: 12px 0;
  60. }
  61. .to_do_text_on {
  62.   background: #888888;
  63.   color: white;
  64.   text-decoration-line: line-through;
  65.   text-decoration-color: white;
  66. }
  67. .del_but {
  68.   /* float: right; */
  69.   order: 3;
  70.   padding: 12px;
  71.   color: #929b7b;
  72.   background-color: white;
  73.   border-radius: 0;
  74.   border: none;
  75. }
  76. .del_but_on {
  77.   color: #E4E1EC;
  78.   background-color: #888888;
  79. }
  80. .del_but:hover {
  81.   background: #f44336;
  82.   color: white;
  83. }
  84. .item:hover {
  85.   cursor: pointer;
  86. }
  87. .markIcon {
  88.   order: 1;
  89.   padding: 12px;
  90.   color: white;
  91.   visibility: hidden;
  92. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <link rel="stylesheet" href="style.css" />
  8.   </head>
  9.   <body>
  10.     <div class="list">
  11.       <div class="head">
  12.         <p class="title">My To Do List</p>
  13.         <div id="add_bar">
  14.           <input type="text" placeholder="Title..." />
  15.           <button id="add_but">Add</button>
  16.         </div>
  17.       </div>
  18.       <div id="items">
  19.         <!-- <div class="item">
  20.           <span class="to_do_text">egg</span>
  21.           <button class="del_but">x</button>
  22.         </div> -->
  23.       </div>
  24.     </div>
  25.     <script src="js.js"></script>
  26.   </body>
  27. </html>
展开查看全部
赞(0）分享  回复(0）举报  2023-09-29
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com