Event Driven Programming: Registering input changes

Question

I am very new to html, css, and javascript so please go easy on me. I am working on an activity that requests: Register the updateCount event handler to handle input changes for the textarea tag. Note: The function counts the number of characters in the textarea. The Javascript so far is as follows -

var textareaElement = document.getElementById("userName");
function updateCount(event) {
document.getElementById("stringLength").innerHTML = event.target.value.length;
}

// Write code here

I have absolutely no idea what it is asking of me for this problem. Both online resources and textbooks have not been very helpful.

The HTML cannot be changed in any way, forcing me to solve it with just changes the the javascript. The HTML is as follows -

<label for="userName">User name:</label>
<textarea id="userName" cols="40" rows="3"></textarea><br>
<p id="stringLength">0</p>

Any help would be much appreciated, I'm just trying to learn.

score 0 · Answer 1 · answered Feb 20 '18 at 01:29

0

Try this. Add onkeyup event on the <textarea> tag then replace event.target to textareaElement to get the value

var textareaElement = document.getElementById("userName");
function updateCount() {
    document.getElementById("stringLength").innerHTML = textareaElement.value.length;
}

<label for="userName">User name:</label>
<textarea id="userName" onkeyup="updateCount()" cols="40" rows="3"></textarea><br>
<p id="stringLength">0</p>

answered Feb 20 '18 at 01:29

CodeLover

571
2
11

Unfortunately I cannot change the html or javascript function. We need to add brand new code. I think something like this: textareaElement.addEventListener("count", countChars()); but this also does not work – Age of the Milk Feb 27 '18 at 21:11

score 0 · Answer 2 · answered Feb 27 '18 at 21:45

When you have a reference to a DOM node (e.g, <textarea>), you can bind event handlers for the various events that it supports. In this case, we consult the HTMLTextAreaElement docs and learn that the following piece of JS would give the text length

 const textarea = document.getElementById('userName');
 const length = textarea.value.length; // textarea.textLength;

Then, we will consult the docs to determine that it is the input event that we want to bind to.

 textarea.addEventListener('input', updateCount);

Your updateCount gets as its input the input event that also contains a reference to the event target, which is the textarea.

score 0 · Answer 3 · edited Jun 26 '20 at 23:32

0

var textareaElement = document.getElementById("userName");

    function textSize(event) {
       document.getElementById("stringLength").innerHTML = event.target.value.length;
    }
      textareaElement.addEventListener("input", function(event){
      document.getElementById("stringLength").innerHTML = event.target.value.length;

   });

edited Jun 26 '20 at 23:32

David Buck

3,752
35
31
35

answered Jun 26 '20 at 22:25

saitejas mopuri

1
1

This contains part of the answer, but is not in the form of an answer. It would more helpful to explicitly state what additions you made and how they contribute towards the asker's goal. – John Neuhaus Jun 26 '20 at 23:32

score 0 · Answer 4 · edited Nov 21 '20 at 00:52

0

I know the post is old but I just had to figure this one out for myself so for anyone else that has trouble in the future here is the line you need.

textareaElement.addEventListener("blur", updateCount);

edited Nov 21 '20 at 00:52

F. Müller

3,969
8
38
49

answered Nov 20 '20 at 19:54

Corbulo

1
1

Event Driven Programming: Registering input changes

4 Answers4