The HTML, CSS, and JavaScript code I added here works perfectly but I have a very minor problem I.e, for ideal case, if I click on the name of item list, it should get a strike through. The code outcome also matches my expectation but only with the default list name. As soon as I add a new list item, the default list items are not getting strike though any more when they get a click. I guess it is due to conflict of strikeThrought() function (I may be wrong).
document.querySelector("button").addEventListener("click", function() {
if (document.querySelector("input").value.length > 0) {
input();
}
})
document.querySelector("input").addEventListener("keypress", function(event) {
if (document.querySelector("input").value.length > 0 && event.keyCode === 13) {
input();
}
})
deleteList();
strikeThrought();
function input() {
var input = " " + document.querySelector("input").value;
var li = document.querySelector("ul").appendChild(document.createElement("li"));
var button = li.appendChild(document.createElement("button"));
button.innerHTML = "Delete";
var span = li.appendChild(document.createElement("span"));
span.innerHTML = input;
document.querySelector("input").value = "";
deleteList();
strikeThrought();
}
function deleteList() {
for (var i = 0; i < document.querySelectorAll("li button").length; i++) {
document.querySelectorAll("li button")[i].addEventListener("click", function() {
for (var j = 0; j < document.querySelectorAll("li").length; j++) {
this.parentNode.remove()
}
})
}
}
function strikeThrought() {
for (var i = 0; i < document.querySelectorAll("span").length; i++) {
document.querySelectorAll("span")[i].addEventListener("click", function() {
this.classList.toggle("done");
})
}
}
li{
padding: 3px;
}
p{
margin: 0;
}
.coolTitle {
text-align: center;
font-family: 'Oswald', Helvetica, sans-serif;
font-size: 40px;
transform: skewY(-10deg);
letter-spacing: 4px;
word-spacing: -8px;
color: tomato;
text-shadow:
-1px -1px 0 firebrick,
-2px -2px 0 firebrick,
-3px -3px 0 firebrick,
-4px -4px 0 firebrick,
-5px -5px 0 firebrick,
-6px -6px 0 firebrick,
-7px -7px 0 firebrick,
-8px -8px 0 firebrick,
-30px 20px 40px dimgrey;
}
.done {
text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Shopping List</h1>
<p>Get it done today</p>
<input type="text" placeholder="Type to enter">
<button type="button">Enter</button>
<ul>
<li class="li0"><button class="toggle-button">Delete</button> <span>Notebook</span></li>
<li class="li1"><button class="toggle-button">Delete</button> <span>Jello</span></li>
<li class="li2"><button class="toggle-button">Delete</button> <span>Rice</span></li>
<li class="li3"><button class="toggle-button">Delete</button> <span>Spinach</span></li>
<li class="li4"><button class="toggle-button">Delete</button> <span>Birthday Cake</span></li>
<li class="li5"><button class="toggle-button">Delete</button> <span>Candles</span></li>
</ul>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
question from:
https://stackoverflow.com/questions/65937435/conflict-between-the-same-function-which-is-once-called-outside-function-and-the 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
