如何使用javascript洗掉串列元素-有解無憂

如何使用javascript洗掉串列元素

我正在制作一個簡單的 ToDo 應用程式來學習 Javascript，并且我正在嘗試實作這個洗掉線功能，如果用戶單擊“完成”按鈕，則 todo（文本）會被洗掉。

我嘗試了一些方法，但它們似乎都不起作用，它們也會影響我的完成和洗掉按鈕

function addToDo() {

  var Input = document.getElementById("enter").value // gets input from input box
  var list = document.getElementById('todos'); // gets the list div from html doc
  var entry = document.createElement('li'); // creats a new list element 
  entry.setAttribute('id', 'ToDo') // adds id to list element 

  var deleteTodo = document.createElement("button"); // creates a button
  var doneTodo = document.createElement("button");
  deleteTodo.setAttribute('id', 'deletetodobtn')
  doneTodo.setAttribute('id', 'deletetodobtn')
  deleteTodo.innerHTML = "Delete " // button text  
  doneTodo.innerHTML = "Done"
  doneTodo.onclick = function doneTodo() { // function to delete list element (todo) 
    entry.innerText = entry.textContent.strike()
  }

  deleteTodo.onclick = function deleteTodo() { // function to delete list element (todo) 
    entry.remove()
  }

  entry.textContent = Input // adds  input text to list element 
  list.appendChild(entry); // adds element to list 
  entry.appendChild(deleteTodo); // appends the button 
  entry.appendChild(doneTodo);
  document.getElementById("enter").value = ""; // reinitialises text field with ""
}

document.addEventListener("keypress", function onEvent(event) { // if enter is clicked todo is added
  if (event.key === "Enter")
    addToDo()
})

@import url('https://fonts.googleapis.com/css2?family=JetBrains Mono:wght@700&display=swap');
body {
  background: #fd746c;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #ff9068, #fd746c);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #ff9068, #fd746c);
  /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */
}

h1 {
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 5vw;
  text-align: center;
  margin-top: -4%;
  -webkit-text-stroke: 2px black;
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 15vw;
    margin-top: 0%;
  }
}

ul {
  display: table;
  margin: 0 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  color: white;
}

#enter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  border-radius: 10px;
  width: 30em;
}

@media only screen and (max-width: 600px) {
  #enter {
    width: 15em;
  }
}

#deletetodobtn {
  font-family: 'JetBrains Mono', monospace;
  margin-left: 30px;
  margin-top: 20px;
  background-color: #ff4242;
  /* Green */
  border: none;
  border-radius: 20px;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

#deletetodobtn:hover {
  background-color: #4d0e0e;
  transition: background-color 0.2s ease-in;
}

#add {
  font-family: 'JetBrains Mono', monospace;
  margin-left: 20px;
  margin-top: 10px;
  background-color: #0d0f29;
  /* Green */
  border: none;
  border-radius: 20px;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
}

#add:hover {
  background-color: #4049c5;
  transition: background-color 0.2s ease-in;
}

#center {
  text-align: center;
  margin-top: 10%;
}

.strike {
  /* strikethrough done todo */
  text-decoration: 'line-through'
}

<body>
  <center>
    <div id="center">
      <h1>ToDo List</h1>
      <input type="text" id="enter" placeholder="Enter ToDo ...">

      <button onclick="addToDo()" id="add"> Add ToDo </button>

      <ul id="todos">
        <ul>
    </div>
  </center>
  
  <script src="script.js" defer></script>
</body>

我試圖以幾種方式解決這些問題：

1. 將 CSS 類添加到按鈕單擊時洗掉的待辦事項串列元素

doneTodo.onclick = function doneTodo(){ // function to delete list element (todo) 
        entry.classList.add('strike');
  }

.strike{  /* strikethrough done todo */
    text-decoration: 'line-through'
}

這沒有任何影響

2.使用strike()方法

我嘗試了一些變化：

1.內部HTML

 doneTodo.onclick = function doneTodo(){ // function to delete list element (todo) 
    entry.innerHTML=entry.textContent.strike()
  }

這會產生：如何使用javascript洗掉串列元素 2. innerText

 doneTodo.onclick = function doneTodo(){ // function to delete list element (todo) 
        entry.innerText=entry.textContent.strike()
      }

產生這個：如何使用javascript洗掉串列元素

是否可以在不影響我的完成或洗掉按鈕的情況下實作此功能？

uj5u.com熱心網友回復：

只需添加您的課程，而不是嘗試修改文本。此外，CSS 屬性值通常不是帶引號的字串。自定義字體系列名稱和偽元素內容除外。

function addToDo() {

  var Input = document.getElementById("enter").value // gets input from input box
  var list = document.getElementById('todos'); // gets the list div from html doc
  var entry = document.createElement('li'); // creats a new list element 
  entry.setAttribute('id', 'ToDo') // adds id to list element 

  var deleteTodo = document.createElement("button"); // creates a button
  var doneTodo = document.createElement("button");
  deleteTodo.setAttribute('id', 'deletetodobtn')
  doneTodo.setAttribute('id', 'deletetodobtn')
  deleteTodo.innerHTML = "Delete " // button text  
  doneTodo.innerHTML = "Done"

  doneTodo.onclick = function doneTodo() { // function to delete list element (todo) 
    entry.classList.toggle('strike'); // or just classList.add
  }

  deleteTodo.onclick = function deleteTodo() { // function to delete list element (todo) 
    entry.remove()
  }

  entry.textContent = Input // adds  input text to list element 
  list.appendChild(entry); // adds element to list 
  entry.appendChild(deleteTodo); // appends the button 
  entry.appendChild(doneTodo);
  document.getElementById("enter").value = ""; // reinitialises text field with ""
}

document.addEventListener("keypress", function onEvent(event) { // if enter is clicked todo is added
  if (event.key === "Enter")
    addToDo()
})

@import url('https://fonts.googleapis.com/css2?family=JetBrains Mono:wght@700&display=swap');
body {
  background: #fd746c;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #ff9068, #fd746c);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #ff9068, #fd746c);
  /* W3C, IE 10 / Edge, Firefox 16 , Chrome 26 , Opera 12 , Safari 7  */
}

h1 {
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 5vw;
  text-align: center;
  margin-top: -4%;
  -webkit-text-stroke: 2px black;
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 15vw;
    margin-top: 0%;
  }
}

ul {
  display: table;
  margin: 0 auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  color: white;
}

#enter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  border-radius: 10px;
  width: 30em;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  #enter {
    width: 15em;
  }
}

#deletetodobtn {
  font-family: 'JetBrains Mono', monospace;
  margin-left: 30px;
  margin-top: 20px;
  background-color: #ff4242;
  /* Green */
  border: none;
  border-radius: 20px;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

#deletetodobtn:hover {
  background-color: #4d0e0e;
  transition: background-color 0.2s ease-in;
}

#add {
  font-family: 'JetBrains Mono', monospace;
  margin-left: 20px;
  margin-top: 10px;
  background-color: #0d0f29;
  /* Green */
  border: none;
  border-radius: 20px;
  color: white;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
}

#add:hover {
  background-color: #4049c5;
  transition: background-color 0.2s ease-in;
}

#center {
  text-align: center;
  margin-top: 10%;
}

.strike {
  /* strikethrough done todo */
  text-decoration: line-through;
}

<body>
  <div id="center">
    <h1>ToDo List</h1>
    <input type="text" id="enter" placeholder="Enter ToDo ...">
    <button onclick="addToDo()" id="add"> Add ToDo </button>
    <ul id="todos"></ul>
  </div>

  <script src="script.js" defer></script>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/448703.html

標籤：javascript html 列表内部html 内文删除线

上一篇：自定義Web組件-無論在何處使用組件，如何將其附加到<body>的開頭？

下一篇：如何更改reactJSLeaflet中的按鈕位置？