Help with JS and textarea

1

Hello everyone) How i can make my word count equal zero when my text area is empty)

https://codepen.io/Mikeliy/pen/EqWMGZ

2

Go back and read your dev tools console. Do you see any errors?

Uncaught TypeError: Cannot read property 'length' of null

Try to do something with that error above so

  1. It doesn’t happen anymore
  2. You can use that same logic that is causing the error, to help with your original request (making count 0)

PS: Try some things and let me know if you need more hints.

1 Like
3
  1. You can use that same logic that is causing the error, to help with your original request (making count 0)

I have already tried to use error through if else but it is not working… i spend half day with this quiz)

4 
if($('#js-myText').length === false) {
   $('#js-wordCount').text(0);
   alert(win);
   
}

all exampels from forums that i found not working …

5 
if($('#js-myText').length === null) {
   $('#js-wordCount').text(0);
   alert(win);
   
}
6

i can not indetify event when the textarea is empty

7

How are you dealing with cases when the textarea is empty?

8

i can not indetify event when the textarea is empty

9

Need more hint ):grinning:

10

Lets take a moment and look at what you wrote.

This line looks for all words in your textarea and returns an array of words.

var count = $('#js-myText').val().match(/\w{1,}/g);

This works pretty well except for when there are not any words. In this case, it returns null, which is NOT an array. That means you cannot access .length

$('#js-wordCount').text(count.length);

This is why you are getting the error because null does not have a length property, like arrays do.

Uncaught TypeError: Cannot read property 'length' of null

So… if you check to make sure that you have words before you call .length it should. Otherwise you can assume the count is 0.

var words = $('#js-myText').val().match(/\w{1,}/g);
var wordCount;
  
if (words) {
    wordCount = words.length
 } else {
    wordCount = 0; 
 } 
$('#js-wordCount').text(wordCount);

Finally, you’ll notice I changed the names of a couple things. Always try to name things exactly what they are because that will help you understand what isn’t working when things are broke.

Hope this helps. Let me know if you need more help or if I said something that you didn’t understand.

PS:

I have already tried to use error through if else but it is not working… i spend half day with this quiz)

The goal was to fix what was causing the error, not to use the error itself.

11 
if (count) {
    wordCount = count.length
 } else {
    wordCount = 0; 
   alert(win);
 }

thank you for help , but still not working…

12 
if (count.length < 10) {
$('#js-wordCount').removeClass("js-text-color");
  $('#js-myText').removeAttr("maxlength");
} else  if (count.length >= 10) {    
$('#js-myText').attr("maxlength", "0"); 
$('#js-wordCount').addClass("js-text-color"); 
} else {
     $('#js-wordCount').text(0);
   alert(win);
}

this too not work

13

Can you update your codepen?

14

https://codepen.io/Mikeliy/pen/EqWMGZ?editors=1010 updated

15

I updated my last suggestion with this line:

$('#js-wordCount').text(wordCount);

I apologize for leaving that out. This is what updates the number.

16 
var count = $('#js-myText').val().match(/\w{1,}/g) || 0;

This is a solution

17

Now I know what is wrong with my code …

18

But why JS execute last else condition ? Who can explain this ? Because count.length can not compute the lenght ?