[英]I want a paragraph to get the line through style whenever a checkbox is checked and vise versa
I managed to make it work in this way:我设法让它以这种方式工作:
<div class="noteContainer">
<p class="title">Hello World</p>
<p class="note">This is the hello world note!
<i class="fa fa-pencil-square-o noteEdit" title="Edit" aria-hidden="true"></i>
<input onclick="setLineThrough()" type="checkbox" name="done" class="cbDone">
</p>
</div>
let checkBoxes = document.getElementsByClassName("cbDone");
const setLineThrough = () => {
for (let i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i].checked) {
checkBoxes[i].parentElement.style.textDecorationLine = "line-through";
} else {
checkBoxes[i].parentElement.style.textDecorationLine = "none";
}
}
};
But then the line through
also goes through my icon
and to the checkbox
so I decided to get them out of the <p>
and made some changes and I was expecting it to work since they were so similar but it just adds the line through
but it does not remove the line through
when the checkbox
is unchecked
!但是然后
line through
也穿过我的icon
并到达checkbox
所以我决定将它们从<p>
中取出并进行一些更改我期待它能够工作因为它们非常相似但它只是添加line through
但是当checkbox
unchecked
时,它不会删除该line through
!
<div class="noteContainer">
<p class="title">Hello World</p>
<p class="note">This is the hello world note!</p>
<i class="fa fa-pencil-square-o noteEdit" title="Edit" aria-hidden="true"></i>
<input onclick="setLineThrough()" type="checkbox" name="done" class="cbDone">
</div>
let checkBoxes = document.getElementsByClassName("cbDone");
let notePara = document.getElementsByClassName("note");
const setLineThrough = () => {
for (let i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i].checked) {
notePara[i].style.textDecorationLine = "line-through";
} else {
notePara[i].parentElement.style.textDecorationLine = "none";
}
}
};
What is wrong with my second iteration?我的第二次迭代有什么问题? I just can't find it.
我只是找不到它。 Also take note that there are some
css
in my code but I don't think it is needed here.另请注意,我的代码中有一些
css
,但我认为这里不需要。
You just need to delete one instance of .parentElement
from your JavaScript.您只需从您的
.parentElement
中删除一个 .parentElement 实例。
Your JavaScript will then look like this:您的 JavaScript 将如下所示:
let checkBoxes = document.getElementsByClassName("cbDone");
let notePara = document.getElementsByClassName("note");
const setLineThrough = () => {
for (let i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i].checked) {
notePara[i].style.textDecorationLine = "line-through";
} else {
notePara[i].style.textDecorationLine = "none";
}
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.