通过innerText进行JavaScript删除无法正常工作

anUp_and-comer

我正在尝试创建“待办事项”列表，遇到了麻烦击穿创建的待办事项。创建的待办事项的右侧会出现一个“单击完成”按钮，单击该按钮应删除文本。我很确定这是（e.target.newToDo.innerText.strike（））的问题

我是否需要为newToDo.innerText创建一个变量？自从在较早的函数中创建（newToDo.innerText = input.value）以来，我仍然可以创建一个吗？

只是想说这个网站上的人们很棒，并提供了很多帮助。先感谢您！

const form = document.querySelector('#addToDo');
const input = document.querySelector('#theToDo');
const todolist = document.querySelector('#todolist');

form.addEventListener('submit',function(e){
    e.preventDefault();
    const newToDo = document.createElement('li');
    const removeBtn = document.createElement('button');
    const completeBtn = document.createElement('button');
    newToDo.innerText = input.value;
    removeBtn.innerText = 'Click to Remove';
    completeBtn.innerText = 'Click if Completed';
    newToDo.appendChild(completeBtn);
    newToDo.appendChild(removeBtn);
    input.value = '';
    todolist.appendChild(newToDo);

    completeBtn.addEventListener("click", function(e){
        e.target.newToDo.innerText.strike();
    })

    removeBtn.addEventListener("click", function(e){
        e.target.parentElement.remove();
    })
})

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <body>
     <h1>To Do List:</h1>
     <ul id="todolist">
        </ul>
     <form action="" id="addToDo" name="addToDo">
        <input type="text" id="theToDo" 
        name="addToDo" 
        placeholder="Add to the list here">
        <button type="submit">Submit</button>
      </form>    
    <script src=Test.js></script>
 </body>
</html>

弗莱彻·里普

为什么您的代码无法正常工作

您的代码无法正常运行，因为e.target.newToDo.innerText.strike()它没有针对li（父元素），因此您需要将设置innerText为删除的字符innerText，否则它将不会显示。

为什么不应该使用 `strike()`

在JS中编辑样式不是一个好习惯<strike>，HTML5不支持标记。

而是创建一个CSS类，如下所示：

.strike {
  text-decoration: line-through;
}

然后将该.strike类附加到HTML元素。

解

const form = document.querySelector('#addToDo');
const input = document.querySelector('#theToDo');
const todolist = document.querySelector('#todolist');

form.addEventListener('submit',function(e){
  e.preventDefault()
  
  todolist.innerHTML += `<li>
                           <span>${input.value}</span>
                           <button onclick="strikeItem(this)">strike</button>
                           <button onclick="removeItem(this)">remove</button>
                         </li>`
})

function strikeItem(ele) {
  const itemTextEle = ele.parentElement.querySelector('span')
  
  itemTextEle.innerHTML = itemTextEle.innerText.strike()
}

function removeItem(ele) {
  ele.parentElement.remove()
}

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <body>
     <h1>To Do List:</h1>
     <ul id="todolist">
        </ul>
     <form action="" id="addToDo" name="addToDo">
        <input type="text" id="theToDo" 
        name="addToDo" 
        placeholder="Add to the list here">
        <button type="submit">Submit</button>
      </form>    
    <script src=Test.js></script>
 </body>
</html>

这一点更易于阅读，编写的代码也更少。

该解决方案使用该strike()函数向您展示如何使用它，我将尝试附加一个类。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。