javascript - 我想在删除按钮旁边添加编辑按钮，这样我就可以编辑我已经插入的值

Question

我的 friend 创建了一个待办事项列表，你可以在这里看看 现在我尝试以我的方式创建待办事项列表，这是我的代码 我快完成了，但我仍然需要添加编辑图标，这样我就可以在单击它时编辑插入的值。 感谢你们帮助我。真诚地。

var myspan= document.getElementsByClassName("myspan");
for(var i=0; i<myspan.length;i++)
    {
     myspan[i].onClick= function()
    {
      var divit = this.parentElement;
      div.style.display="none";
    }
  }


var list =document.querySelector("ul");
list.addEventListener('click', function(event){
  if(event.target.tagName==='LI')
    {
      event.target.classList.toggle('checked')
    }
});

function addBtn()
{
   var li = document.createElement("li");
  var inputValue = document.getElementById("myinput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
 if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("Myul").appendChild(li);
  }
  document.getElementById("myinput").value="";
  
  var span = document.createElement("myspan");
  var text = document.createTextNode("\u00D7")
  span.className="myspan";
  span.appendChild(text);
  li.appendChild(span)
  
  for(var i=0; i<myspan.length;i++)
    {
     myspan[i].onclick = function(){
        var divit=this.parentElement;
      divit.style.display="none";
     }
    } 
}

* {
  box-sizing: border-box;
}

body{
  min-width: 250px;
  text-align:center;
}

#mydiv:after {
  content: "";
  display: table;
  clear: both;
}

#mydiv{
  margin-top:0;
  background: pink;
  min-height: 100px;
  padding: 20px;
}

.addBtn{
  padding: 10px;
  width: 25%;
  background: #F6DDCC;
  color: #555;
  float: left;
  text-align: center;
  
  cursor: pointer;
  transition: 0.3s;
}

.addBtn:hover{
  background:#E59866;
  border: none;
}

#myinput{
   border: none;
   outline: none;
   border: 1px solid none;
   width: 75%;
   height: 38px;
  float: left;
  
}
  

ul {
  margin: 0;
  padding: 0;
}

/* Style the list items */
ul li {
  cursor: pointer;
  position: relative;
  padding: 12px 8px 12px 40px;
  list-style-type: none;
  background: #85C1E9;
  font-size: 18px;
  transition: 0.2s;
  border-top-style: dashed;
  border-width: 0.6px;
  
}
li:first-child {
  border-top: none;
}
li:last-child {
  border-bottom: dashed;
  border-width: 0.6px;
  
}
ul li.checked::before {
  content: '';
  position: absolute;
  border-color: black;
  border-style: solid;
  border-width: 0 2px 2px 0;
  top: 10px;
  left: 16px;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}
ul li.checked {
  background: #BB8FCE;
  color: #fff;
  text-decoration: line-through;
}
.myspan {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.myspan:hover {
  background-color: green;
  color: white;
}

<div id="mydiv">
  <h1>TO DO LIST</h1>
  <input type="text" id="myinput" placeholder="Tittle..">
  <span class="addBtn" id="hshs" onclick="addBtn()">add</span>
</div>

<ul id="Myul">
  
</ul>

Answer 1

您可以做的是添加按钮，然后在单击时仅在用户编辑时更改输入元素的 li 元素，然后将其设置回去。这是一个实际的例子。 https://tareasnico.netlify.app/