CODEWITHSUNDEEP
javascripthtml
John Kosmalski
John Kosmalski

Reputation: 81

Word counting in Javascript

I am trying to figure out a way to count words that are placed in multiple paragraph blocks in javascript. Right now I have a button that is connected to a function and that function is linked to an ID in the paragraph. Here is my code

function processText(elements) {
  var count = 0;
  for (var i = 0; i < elements.length; i++) {
    count += elements[i].textContent.split(/\s/).length;
  }
  return count;
}
var wordsInParagraphs = processText(document.getElementsByTagName("data"));
<!DOCTYPE html>
<html>

<head>
  <meta name="title" content="The Cask of Amontillado--Edgar Allan Poe (1809-1849)">
</head>

<body>
  <p><button 1="processText(elements);">Process</button></p>
  <p id="data"></p>
</body>

Upvotes: 0

Views: 70

Answers (2)

cb64
cb64

Reputation: 855

Is this what you're looking for? You just need to call the function on click and grab all the elements you want to count, you have the rest there (I'm using split instead of regex).

function processText() {
  var elements = document.querySelectorAll(".data");
  var count = 0;
  for (var i = 0; i < elements.length; i++) {
    count += elements[i].textContent.split(" ").length;
  }
  console.log(count)
}
<!DOCTYPE html>
<html>

<head>
  <meta name="title" content="The Cask of Amontillado--Edgar Allan Poe (1809-1849)">
</head>

<body>
  <p><button onclick="processText();">Process</button></p>
  <p class="data">text in paragraph one</p>
  <p class="data">text in paragraph two</p>
</body>

Upvotes: 1

Ele
Ele

Reputation: 33726

The markup has some problems, for example, 1="processText(elements);" probably you meant onClick="processText(elements);", however, you're passing a param called elements. Further, you have a tag with id="data" and you're trying to look for tag name those elements.

A better approach is using the function addEventListener for a better logic and you should mark those paragraphs using a class name class="data". Finally, for splitting by spaces use this regex /\s+/

function processText(elements) {
  var count = 0;
  for (var i = 0; i < elements.length; i++) {
    count += elements[i].textContent.split(/\s+/).length;
  }
  return count;
}

document.getElementById('myButton').addEventListener('click', function() {
  var wordsInParagraphs = processText(document.getElementsByClassName("data"));
  document.getElementById('total').textContent = wordsInParagraphs;
});
<p><button id='myButton'>Process</button></p>
<p class="data">Ele from Stack</p>
<p class="data">Ele from &nbsp;&nbsp;&nbsp;Venezuela</p>
<p id='total'></p>

Upvotes: 1

Related Questions