Question

所以我的页面工作100％，但是，我创建的按钮eventListener只能工作一次。按下按钮多次后它不起作用（在控制台中给我一个错误的铬）。是否有办法让它在按下时始终有效？

这是我的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);

Answer 1

你的问题就在这一行：

searchStr = searchStr.value.toLowerCase()

searchStr最初是一个DOM元素，具有value属性等。执行此行代码后（第一次运行事件侦听器），searchStr保存一个字符串，因此下次没有value属性。当您尝试在此toLowerCase值上访问undefined时，会引发错误。

要解决此问题，只需使用其他变量（如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

第一个searchString是一个对象

searchStr = document.getElementById("searchString");

稍后你将这个变量重写为一个字符串

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

所以第二次你不能获得字符串的'value'属性 - 而且只有'undefined'......

使事件不止一次发生

2 个答案: