我的页面工作 100% 正常，但是，我创建的按钮 eventListener 只能工作一次。多次按下按钮后它不起作用(在 Chrome 的控制台中出现错误)。有没有办法让它在按下时一直工作？
这是我的 HTML 代码:
<!DOCTYPE html>
<html lang = "en">
<head>
<title> Question </title>
<meta charset = "utf-8">
<link rel = "stylesheet" type = "text/css" href = "CharacterOccurences.css"/>
<script type = "text/javascript" src = "CharacterOccurences.js">
</script>
</head>
<body>
<form>
<p> Enter some text: <br>
<textarea id = "searchString" rows = "4" cols = "55"></textarea>
</p>
<p> Enter characters to search for: <br>
<input type = "text" id = "characters" size = "5" />
<input type = "button" id = "searchButton" value = "Search"/>
</p>
<p id = "output">
</p>
</form>
</body>
还有我的 Javascript 代码:
var searchStr;
var ch;
var outResult;
function getAllDomElement()
{
var searchButton = document.getElementById("searchButton");
searchButton.addEventListener("click", searchOccurences, false);
searchStr = document.getElementById("searchString");
ch = document.getElementById("characters");
outResult = document.getElementById("output");
}
function searchOccurences()
{
var count = 0;
var chValue = ch.value.charAt(0);
searchStr = searchStr.value.toLowerCase(), result = "";
for(var i = 0; i < searchStr.length; i++)
{
if(searchStr[i].indexOf(chValue) == 0)
{
count++;
}
}
result = "Results: <br>" + count + " occurence(s) of " + chValue + " found.";
if(count == 0)
{
outResult.innerHTML = "The character " + chValue + " was not found.";
}
else
{
outResult.innerHTML = result;
}
}
window.addEventListener("load", getAllDomElement, false);
最佳答案
你的问题是这一行:
searchStr = searchStr.value.toLowerCase()
searchStr 最初是一个 DOM 元素，具有 value 属性等。执行此行代码后(事件监听器第一次运行)，searchStr 保存一个字符串，因此下次不会有 value 属性。当您尝试访问此 undefined 值的 toLowerCase 时，会引发错误。
要解决此问题，只需使用不同的变量(例如 search)来保存有问题的字符串:
var searchStr;
var ch;
var outResult;
function getAllDomElement() {
var searchButton = document.getElementById("searchButton");
searchButton.addEventListener("click", searchOccurences, false);
searchStr = document.getElementById("searchString");
ch = document.getElementById("characters");
outResult = document.getElementById("output");
}
function searchOccurences() {
var count = 0;
var chValue = ch.value.charAt(0);
var search = searchStr.value.toLowerCase(),
result = "";
for (var i = 0; i < search.length; i++) {
if (search[i].indexOf(chValue) == 0) {
count++;
}
}
result = "Results: <br>" + count + " occurence(s) of " + chValue + " found.";
if (count == 0) {
outResult.innerHTML = "The character " + chValue + " was not found.";
} else {
outResult.innerHTML = result;
}
}
window.addEventListener("load", getAllDomElement, false);<!DOCTYPE html>
<html lang="en">
<head>
<title> Question </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CharacterOccurences.css" />
<script type="text/javascript" src="CharacterOccurences.js">
</script>
</head>
<body>
<form>
<p> Enter some text: <br>
<textarea id="searchString" rows="4" cols="55"></textarea>
</p>
<p> Enter characters to search for: <br>
<input type="text" id="characters" size="5" />
<input type="button" id="searchButton" value="Search" />
</p>
<p id="output">
</p>
</form>
</body>关于javascript - 使一个事件发生多次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42879476/