Javascript addEventListener function call
Question
Can anyone please tell me how can I make the function strikeText work? I get this error in browser inspect.
Uncaught ReferenceError: newButton is not defined at HTMLButtonElement.strikeText (todo.js:29)
PS: The inline function works but if I want to make a separate function it is not working.
HTML
<!DOCUMENT html>
<html>
<head>
<title>To Do List</title>
</head>
<body>
<form id="myForm">
<input type="text" id="inputId" value="">
<button type="button" id="submitButton">Add</button>
<ul id="list">
<li>
<button type="button">Do that</button>
</li>
<li>
<button type="button">Do this</button>
</li>
</ul>
</form>
<script src="todo.js">
</script>
</body>
</html>
JavaScript
var submitB = document.getElementById("submitButton");
var striked = false;
submitB.addEventListener("click", addLi);
function addLi() {
var input = document.getElementById("inputId").value;
var newButton = document.createElement("button");
var ulList = document.getElementById("list");
var newLi = document.createElement("li");
var newText = document.createTextNode(input);
newButton.appendChild(newText);
newButton.addEventListener("click", strikeText);
newButton.setAttribute("type", "button");
newLi.appendChild(newButton);
ulList.appendChild(newLi);
var reset = document.getElementById("myForm").reset();
}
function strikeText() {
striked = !striked;
switch (striked) {
case true:
newButton.style.textDecoration = "line-through";
break;
case false:
newButton.style.textDecoration = "none";
break;
}
}
2 answers
solution1
0 2017-11-15 18:40:18
Its working here with the snippet as below.. so only possible reason will be where you javascript code is make sure its executed after load and accessed after DOM is ready
var submitB = document.getElementById("submitButton"); var striked=false; submitB.addEventListener("click", addLi); function addLi() { var input = document.getElementById("inputId").value; var newButton = document.createElement("button"); var ulList = document.getElementById("list"); var newLi = document.createElement("li"); var newText = document.createTextNode(input); newButton.appendChild(newText); newButton.addEventListener("click",strikeText); newButton.setAttribute("type", "button"); newLi.appendChild(newButton); ulList.appendChild(newLi); var reset = document.getElementById("myForm").reset(); } function strikeText(){ striked=!striked; switch(striked){ case true: newButton.style.textDecoration="line-through"; break; case false: newButton.style.textDecoration="none"; break; } }
<!DOCUMENT html> <html> <head> <title>To Do List</title> </head> <body> <form id="myForm"> <input type="text" id="inputId" value=""> <button type="button" id="submitButton">Add</button> <ul id="list"> <li><button type="button">Do that</button></li> <li><button type="button">Do this</button></li> </ul> </form> <script src="todo.js"> </script> </body> </html>
solution2
0 ACCPTED 2017-11-15 18:41:19
As jmargolisvt said, the newButton is an unknown variable in your strikeText function. Solution: use 'this' instead:
case true:
this.style.textDecoration="line-through";
break;
case false:
this.style.textDecoration="none";
break;
Also, what worked in my case was using the strikeText parameter:
function strikeText(event){
striked=!striked;
switch(striked){
case true:
event.target.style.textDecoration="line-through";
break;
case false:
event.target.style.textDecoration="none";
break;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.