Javascript addEventListener函数调用
[英]Javascript addEventListener function call
问题描述
Can anyone please tell me how can I make the function strikeText work? 
谁能告诉我如何使函数strikeText工作？ 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. PS：内联函数有效，但是如果我要创建一个单独的函数，它将无法正常工作。
HTML 的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 的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 个解决方案
解决方案1
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 它在此处与以下代码段一起工作..因此，唯一可能的原因是您的JavaScript代码必须确保其在加载后执行并在DOM准备就绪后访问
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>
解决方案2
0 已采纳 2017-11-15 18:41:19
As jmargolisvt said, the newButton is an unknown variable in your strikeText function. 就像jmargolisvt所说的那样，newButton是strikeText函数中的一个未知变量。 Solution: use 'this' instead: 解决方案：改用“ this”：
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: 另外，在我的案例中，有效的是使用strikeText参数：
function strikeText(event){
striked=!striked;
switch(striked){
case true:
event.target.style.textDecoration="line-through";
break;
case false:
event.target.style.textDecoration="none";
break;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.