當復選框被選中時，我如何用JavaScript添加樣式text-decoration:line-through？ -有解無憂

我試圖在HTML、CSS和Vanilla JavaScript中創建一個待辦事項應用程式，但當我試圖在我的checkBox常量上切換完成類（具有text-decoration: line-through）時，我得到錯誤checkBox is undefined。有誰知道如何使之作業？編輯：我添加了HTML和CSS代碼。我的代碼如下：

。

function addTask() {
  const checkBox = document.createElement("INPUT") 。
  checkBox.setAttribute("type", "checkbox") 。
  let task = document.createElement（"li"）。
  let inputVal = document.getElementById("taskName"/span>).value。

  if (inputVal === "") {
    alert ("Luilak!")
    回傳。
  }

  task.innerHTML = inputVal;
  taskItem.appendChild（task）。
  taskItem.appendChild（checkBox）。
 
  let taskList = [];
  taskList.push（inputVal）。
}

if (checkBox.checked ==true) {
  taskItem.classList.toggle(" completed", true)
} else {
  taskItem.classList.toggle(" completed", false)
}

html {
    text-align: center;
}

h1 {
    font-family: arial;

}

h2 {
    font-family: arial;
    font-style: 斜體。
}
 #add {
  background-color: hsl(185,100%,50%) 。
  font-family: arial;
  font-size: 20px;
  border-radius: 15px;
  margin-top: 25px;
  height: 50px;
  width: auto;
 }

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

li {
    font-family: arial;
}

<!DOCTYPE html> 
<html lang="en"> 
<head>/span>
    <link href="Style. css" rel="styleheet">。
    <script src="Script. js"></script>>
    <meta charset="UTF-8">/span>
    < meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
    <title>待辦事項應用程式</title>
</head>/span>
<body> 
    <h1>待辦事項應用</h1>
    <h2>Today</h2>
    <ul id="taskItem"/span>> </ul>>
    < input type="text" id="taskName" value=">  <br>
    < button onclick="addTask()"  型別="按鈕" id="add"> 添加任務</button> 
</body>/span>
</html>/span>

uj5u.com熱心網友回復：

使用onchange事件。

你在函式中直接檢查checkBox.checked === true，這將只檢查一次。這必須在復選框的onchange中完成。在里面檢查復選框的值并切換task的類，也就是你的li元素。

。

function addTask() {
  const checkBox = document.createElement("INPUT"/span>)。
  checkBox.setAttribute("type", "checkbox") 。
  checkBox.onchange = function（e）{
    if(e.target.checked) {

    }
  }
  let task = document.createElement("li") 。
  let inputVal = document.getElementById("taskName"/span>).value。

  if (inputVal === "") {
    alert("Luilak！")
    回傳。
  }

  task.innerHTML = inputVal;
  taskItem.appendChild（task）。
  taskItem.appendChild（checkBox）。

  let taskList = [];
  taskList.push（inputVal）。
  checkBox.onchange = function（e）{
    if(e.target.checked) {
      task.classList.toggle(" completed", true)
    } else {
      task.classList.toggle("complete", false)
    }
  }
}

html {
  text-align: center;
}

h1 {
  font-family: arial;

}

h2 {
  font-family: arial;
  font-style: 斜體。
}

#add {
  background-color: hsl(185, 100%, 50%) 。
  font-family: arial;
  font-size: 20px;
  border-radius: 15px;
  margin-top: 25px;
  height: 50px;
  width: auto;
}

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

li {
  font-family: arial;
}

< h1>/span>To-Do App</h1>
<h2>Today</h2>
<ul id="taskItem"/span>> </ul>>
< input type="text" id="taskName" value=">  <br>
< button onclick="addTask()"  型別="按鈕" id="add"> 添加任務</按鈕>

uj5u.com熱心網友回復：

這種方式

const 
  todoList = document.querySelector('ul#taskItem')
, btAddTask = document.querySelector('button#add')
, task = document.querySelector('#taskName')
  ;
btAddTask.onclick = e => 。
  {
  task.value = task.value.trim() //remve extra spaces()
  if ( task.value ==''/span> )        //控制先
    {
    alert ('Luilak! ')
    回傳。
    }
  let newLI = document.createElement('li')
  newLI.innerHTML = `<input type="checkbox"> ${task.value}` //使用反引號系統。
  task.value = '' ///clear input 4 next usage
  todoList.appendChild（newLI）。
  }
todoList.onclick = e => // use event delegation
  {
  if (!e.target.matches('input[type="checkbox"]') return //驗證被點擊的元素。

  e.target.closest（'li'）.classList。 toggle(' completed', e.target.checked) //1 line 4 both cases。
  }

span class="hljs-selector-tag">html {
  text-align : center;
  font-family : Arial, Helvetica, sans-serif; /* 兩個元素的字體相同*/。
}
h2 {
  font-style : italic;
}
#add {
  background : hsl(185,100%, 50%) 。
  font-size : 1.8em; /* 使用em單位*/。
  border-radius : .7em;
  margin : 1em;
  padding : .2em .7em;
  }
.complete {
  text-decoration : line-through;
}
#taskItem {
  margin : .1em auto;
  width : 12em;
  padding : 0;
  list-style : none;
  text-align : left;
}
#taskItem li {
  display : inline-block;
  width : 100%;
  margin-bottom : .3em;
  padding : .4em;
  background : whitesmoke;
}

< h1>/span>To-Do App</h1>
<h2>Today</h2>

< input type="text" id="taskName" value=">  <br>
<button type="button" id="add" /span>>。 添加任務</button> 

<ul id="taskItem"/span>>。 </ul>

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

標籤：

上一篇：如何用Javascript遍歷一個物件陣列并對一個特定屬性求和

下一篇：計算有價值的輸入的數量