使一个事件发生不止一次

Question

My page works 100% fine, however, the button eventListener that I have created only works once.我的页面 100% 正常工作，但是，我创建的按钮eventListener只能工作一次。 It does not work after pressing the button more than one time (gives me an error in the console in Chrome).多次按下按钮后它不起作用（在 Chrome 的控制台中给我一个错误）。 Is there a way to make it work all the time when pressed?有没有办法让它在按下时一直工作？

Here's my HTML code:这是我的 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>

And my Javascript code:还有我的 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);

Answer 1

Your problem is this line:你的问题是这一行：

searchStr = searchStr.value.toLowerCase()

searchStr is initially a DOM element, with a value property and such. searchStr最初是一个 DOM 元素，具有value属性等。 After this line of code is executed (the first time the event listener is run), searchStr holds a string and thus does not have a value property on the next time around.在执行这行代码后（第一次运行事件侦听器）， searchStr持有一个字符串，因此在下一次没有value属性。 When you attempt to access toLowerCase on this undefined value, an error is thrown.当您尝试访问此undefined值的toLowerCase时，会引发错误。

To remedy the problem, just use a different variable like search to hold the string in question:要解决此问题，只需使用不同的变量（如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>

Answer 2

first searchString is an object首先 searchString 是一个对象

searchStr = document.getElementById("searchString");

and later you rewrite into this variable a string然后你将一个字符串重写到这个变量中

searchStr = searchStr.value.toLowerCase(), result = "";

So second time you cannot get 'value' property of the string - and only have 'undefined'...所以第二次你不能得到字符串的 'value' 属性 - 并且只有 'undefined' ...

使一个事件发生不止一次

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-03-18 20:33:22

解决方案2
1 2017-03-18 20:41:41

使一个事件发生不止一次

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-03-18 20:33:22

解决方案2 1 2017-03-18 20:41:41

解决方案1
3 已采纳 2017-03-18 20:33:22

解决方案2
1 2017-03-18 20:41:41