Why is my word counter not returning anything?

Question

I made a simple words counter to count the number of words in an HTML text box. It takes the data from the inputText field in the html doc, and counts how many actual words are in it. I can not get it to display the word count in the box. What am I doing wrong?

function count_words(evt) {
    var input = document.getElementById('inputText').value;
    var words = 0;
    input = count_words().replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, ' ');
    input = input.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    words = input.split(' ').length;

    words = document.getElementById('numberOfWords').innerHTML;
}

window.onload = function (evt) {
    if (document && document.getElementById) {
        document.getElementById('btnConvert').onclick = count_words;
    }
}

<textarea id="inputText" cols="30" rows="6">The quick brown fox jumps over the lazy dog.</textarea>
<br>
<input type="button" id="btnConvert" value="Word Count">
<input id="numberOfWords" type="text" value="" size="6">

I think you after something like -> `document.getElementById('numberOfWords').innerText = words` — Keith, Oct 04 '20 at 15:07
Shouldn’t `count_words().replace` be `input.replace`? Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. You’re getting “`InternalError`: too much recursion”. — Sebastian Simon, Oct 04 '20 at 15:10
HUH `input = count_words().` <--- why is the method calling itself? Should be a error since it is infinite.... — epascarello, Oct 04 '20 at 15:10
@Keith still getting an error "Uncaught RangeError: Maximum call stack size exceededthat" for the count_words().replace. That might have been an issue too tho. — Nudge, Oct 04 '20 at 15:11
@Keith Inputs don’t use an `innerText`. You mean `value` instead. — Sebastian Simon, Oct 04 '20 at 15:12
Try making this `document.getElementById('numberOfWords').value = words` — xTrimy, Oct 04 '20 at 15:15
@user4642212 Yes, spot on. Didn't look at the HTML in detail, probably because the OP was using innerHTML I assumed he was using some sort of label. Although INPUT do have innerText nothing gets rendered with it & value is what the OP wants. — Keith, Oct 04 '20 at 15:17

score 2 · Accepted Answer · answered Oct 04 '20 at 15:15

words = document.getElementById('numberOfWords').innerHTML;

This part is wrong. This means you are assigning innerHTML attribute value into words value.

Now, you are inserting value to input tag so you need to assign words value to value attribute.

document.getElementById('numberOfWords').value = words;

input = count_words().replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, ' ');

And this part is wrong. count_words() should be replaced with input.

function count_words(evt) {
    var input = document.getElementById('inputText').value;
    var words = 0;
    input = input.replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, ' ');
    input = input.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    words = input.split(' ').length;

    document.getElementById('numberOfWords').value = words;
}

window.onload = function (evt) {
    if (document && document.getElementById) {
        document.getElementById('btnConvert').onclick = count_words;
    }
}

<textarea id="inputText" cols="30" rows="6">The quick brown fox jumps over the lazy dog.</textarea>
<br>
<input type="button" id="btnConvert" value="Word Count">
<input id="numberOfWords" type="text" value="" size="6">

You can check this https://stackoverflow.com/questions/5371089/count-characters-in-textarea — Ishita Ray, Oct 04 '20 at 15:25

score 0 · Answer 2 · answered Oct 04 '20 at 15:15

Few edits to your function should solve it

  function count_words(evt) {
    var input = document.getElementById('inputText').value;
    var words = 0;
    input = input.replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, ' ');
    words = input.split(' ').length;
    document.getElementById('numberOfWords').value = words; 
}

score 0 · Answer 3 · answered Oct 04 '20 at 15:16

I got, just got to change count_words().replace to input.replace and words = document.getElementById('numberOfWords').innerHTML to document.getElementById('numberOfWords').innerText = words

function count_words(evt) {
    var input = document.getElementById('inputText').value;
    var words = 0;
    input = input.replace(/(< ([^>]+)<)/g, '').replace(/\s+/g, ' ');
    input = input.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    words = input.split(' ').length;

    document.getElementById('numberOfWords').value = words;
}

window.onload = function (evt) {
    if (document && document.getElementById) {
        document.getElementById('btnConvert').onclick = count_words;
    }
}

Your code seems right, but in your explanation you still mention the incorrect `innerText`. — Sebastian Simon, Oct 04 '20 at 15:17

Why is my word counter not returning anything?

3 Answers3