alert message every length increase of 5

[StevenOliver]

Question:
How do I get an alert after every input (keypress or paste) of 5 or more characters are pasted into a textarea?

// This doesn't work:
function alert_every_five() {
var incrmt = 5;
if ( document.getElementById("my_input").value.length > incrmt ) {
alert("you input another five-or-more characters");
incrmt += 5;
}
}

Example:
Visitor types the words "Good day! How are you today?"

Desired effect while typing:
As soon as visitor types the "d" in "day," the alert should trigger.
No more alerts should trigger until each 5 character increment (i.e. as soon as they type the "H" in "How," the "r" in "are" etc. etc.).

Desired effect while pasting:
Alerts should trigger only if "5-or-more" characters are input:
If visitor pastes "good day! How are you today?" : just one alert.
If visitor pastes "good day" and then "How" and then "are you today?" : alert after "good day" and no more alerts until "are you today" is pasted.

Thank you!

[requinix]

Every time this function runs, incrmt - which you really should spell out normally - will be set to 5. Every time.

The variable needs to come from outside the function so there's only one copy of it floating around.

[StevenOliver]

This is the best I can do. This appears to work whether the visitor hand-types their input, or pastes their input:

<script>

var character_count = 5;
var multiples = 1;

function show_alert(n) {
if (n > (character_count * multiples)) {
alert(" At least 5 more characters were entered. ");
multiples++;
}
}

</script>

<textarea onInput="show_alert(this.value.length);" > </textarea>

Your thoughts please?

Edited May 8, 2020 by StevenOliver

[requinix]

1. It's bad practice to create global variables.
2. It's also bad practice to write inline event handlers.
3. Your message says "at least 5" but your code checks for more than five.

<textarea id="something"></textarea>

<script>
(function() {
	var character_count = 5;
	var multiples = 1;
  	var textarea = document.getElementById("something");
  
	textarea.addEventListener("input", function() {
		if (textarea.value.length >= (character_count * multiples)) {
			alert("At least 5 more characters were entered.");
			multiples++;
		}
	});
})();
</script>

1. Wrapping all your stuff in an anonymous function that executes immediately will keep the variables safe.
2. Use addEventListener to attach events dynamically.

[StevenOliver]

Requinix, thank you! When you say "inline event handlers," do you mean "onClick" and "onInput?" With my simple script, what are some things that could go wrong?

[requinix]

28 minutes ago, StevenOliver said:

When you say "inline event handlers," do you mean "onClick" and "onInput?"

And all the other on*s, yes.

The reasons to avoid them are too complicated and lengthy for me to want to go into now (Google is your friend), but the highlights are:
1. It's a good thing to keep HTML and Javascript separate from each other
2. Using onclick attributes means you can only have the one click event handler
3. Managing event handlers that way is annoying when you start getting into larger applications

Establish the right habits now and you won't have to reconsider what you're doing later.

[gizmola]

3 hours ago, StevenOliver said:

Requinix, thank you! When you say "inline event handlers," do you mean "onClick" and "onInput?" With my simple script, what are some things that could go wrong?

In case you were wondering, the example provided is the implementation of an IFFE (I pronounce it IFFY but maybe that's just me).  A very useful mechanic and design pattern.  Once you grok it, you will find it very useful.  

To quote the page I linked:

Quote

IIFEs are very useful because they don’t pollute the global object, and they are a simple way to isolate variables declarations.

You may find yourself looking at all the global variables and functions you made to and finding this technique a great way of cutting down on those.  

[StevenOliver]

Thank you all! This will work in Netscape Navigator, right? Javascript sure has come a long way since the 90's.

[gizmola]

6 minutes ago, StevenOliver said:

Thank you all! This will work in Netscape Navigator, right? Javascript sure has come a long way since the 90's.

Yes, it's a language construct that is part of javascript itself.  

One essential resource is Can I use?  Very nice way of checking if the techniques 

[StevenOliver]

gizmola, thank you for mentioning that "Can I use" site. That should definitely be useful for me. Another site I use is that one that displays what my website looks like in different browsers. I forgot the name of it, but I like to be cross-platform. Nothing bugs me more than websites that say "You must use xyz to view this site properly."