I am trying to get add a delete button to the already existing "li" as well. But it seems that after selecting all "li" by "var li", only the first "li" respond to the "addButton()"function. The second question is, how we leave out a child element, so that it does not affect by its parent. In this case, how do I add the "toggle("done")"effect without affecting the button? Thank you.
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var li = document.querySelector("li");
var li2 = document.createElement("li");
var bt = document.createElement("button");
function addButton(){
li.appendChild(bt);
bt.appendChild(document.createTextNode("Delete"));
}
addButton()
function inputLength() {
return input.value.length;
}
function createListElement() {
li2.appendChild(document.createTextNode(input.value));
ul.appendChild(li2);
input.value = "";
li2.appendChild(bt);
bt.appendChild(document.createTextNode("Delete"));
}
function deleteLi(event){
event.target.parentNode.remove()};
function addListAfterClick() {
if (inputLength() > 0) {
createListElement();
}
}
function addListAfterKeypress(event) {
if (inputLength() > 0 && event.keyCode === 13) {
createListElement();
}
}
button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
bt.addEventListener("click",deleteLi );
function toggleDone(e){
e.target.classList.toggle("done");
}
ul.addEventListener("mousedown", toggleDone);
This is the html
<!DOCTYPE html>
<html>
<head>
<title>Javascript + DOM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul>
<li class="bold red" random="23">Notebook</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
This is the CSS
.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;
}
