CODEWITHSUNDEEP
javascripthtmldom-events
JKawa
JKawa

Reputation: 179

Making an event happening more than once

My page works 100% fine, however, the button eventListener that I have created only works once. It does not work after pressing the button more than one time (gives me an error in the console in Chrome). Is there a way to make it work all the time when pressed?

Here's my HTML code:

<!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:

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);

Upvotes: 0

Views: 75

Answers (2)

Mihey Mik
Mihey Mik

Reputation: 1862

first searchString is an object

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'...

Upvotes: 1

gyre
gyre

Reputation: 16777

Your problem is this line:

searchStr = searchStr.value.toLowerCase()

searchStr is initially a DOM element, with a value property and such. 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. When you attempt to access toLowerCase on this undefined value, an error is thrown.

To remedy the problem, just use a different variable like search to hold the string in question:

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>

Upvotes: 3

Related Questions