element.value for updating is not defined, tried to define it globally and local, but get the same error

Question

This is just a char counter(later on I will count words) for the value of the textarea.

The currentLenght variable is not defined. I have tried to have it in the global and local scope, but I get the same error.

Upon clicking the left span, this calls the getCharLenght fn and should update the "result" span with the value.

Here is the JS:

getCharacters.addEventListener("click", getCharLenght());
function getCharLenght() {
    contentBox.addEventListener("input", function() {
        if (currentLength > 0) {
            result.innerHTML = currentLength;
            result.style.opacity = 1;
        } else {
            result.style.opacity = 0;
        }
    });
}

And here is the pen:

https://codepen.io/damianocel/pen/LLwvBL

Why is this happening, I am aware of hoisting and scope(more or less).

`currentLength` is never declared or assigned in the code in the question. Where/how are you doing that? (Hiding it away in a CodePen is not sufficient. The full content of your question must be **here**, on-site. Look at using Stack Snippets [the `[<>]` toolbar button] to create a runnable example here on-site.) — T.J. Crowder, Jul 21 '17 at 11:09
In addition to above, You need to pass the function reference `getCharacters.addEventListener("click", getCharLenght);` and also Why are you binding event Listener in another listener — Satpal, Jul 21 '17 at 11:10
SOrry TJ, I will update that. @Satpal, I did pass the function reference correctly now. Still the same. Are you saying there is a conflict between 2 eventListeners? — ptts, Jul 21 '17 at 11:18

score 2 · Accepted Answer · answered Jul 21 '17 at 11:18

currentLength is defined when you define it on load, it is not updated after then which means that it's always the same value.

Because of this please see below how I moved it into the getCharLenght method.

var contentBox = document.getElementById("contentBox");
var getCharacters = document.getElementById("getCharacters");
var result = document.getElementById("result");

function getCharLenght() {
    var currentLength = contentBox.value.length;
    if (currentLength > 0) {
      result.innerHTML = currentLength;
      result.style.opacity = 1;
    } else {
      result.style.opacity = 0;
    }
}

getCharacters.addEventListener("click", getCharLenght);

Also when you use getCharLength() it considers it as an execution and will pass the result rather than a callback to the function itself.

Please see: Callback function - use of parentheses

Hope this helps.

This was very helpful. The exectuion istead of callback was a stupid error on my part. — ptts, Jul 21 '17 at 11:34

score 1 · Answer 2 · answered Jul 21 '17 at 11:23

The problem is the function getCharLenght() is called before you Initialize the length in currentLength, I have updated your Codepen,

Here is the

https://codepen.io/shohil06/pen/brbbvV

var getCharacters = document.getElementById("getCharacters");
var result = document.getElementById("result");

getCharacters.addEventListener("click", getCharLenght());

function getCharLenght() {
  contentBox.addEventListener("input", function() {
    var contentBox = document.getElementById("contentBox");
    var currentLength = contentBox.value.length;
    if (currentLength > 0) {
      result.innerHTML = currentLength;
      result.style.opacity = 1;
    } else {
      result.style.opacity = 0;
    }
  });
}

Enjoy!

Hope it helps

Thank You

This is good, and there is something interesting happening there, unintended. The function executes immediatelly on input, which was not my goal, but it is interesting to see the difference between getCharLenght() and getCharLenght on the click listener. — ptts, Jul 21 '17 at 11:38
Yeah @ptts , The function is tracking the each and every character and updating the length regularly, ! It is so much fun ! — SHOHIL SETHIA, Jul 21 '17 at 11:41

score 0 · Answer 3 · answered Jul 21 '17 at 11:17

var contentBox = document.getElementById("contentBox");
var getCharacters = document.getElementById("getCharacters");
var result = document.getElementById("result");
var currentLength = 0;

getCharacters.addEventListener("click", getCharLenght());

function getCharLenght() {
  contentBox.addEventListener("input", function() {
  currentLength = contentBox.value.length
    if (currentLength > 0) {
      result.innerHTML = currentLength;
      result.style.opacity = 1;
    } else {
      result.style.opacity = 0;
    }
  });
}

h1 {
  color: grey;
  margin: 0 auto;
  text-align: center;
}

#contentBox {
  display: block;
  margin: 10px auto;
  height: 150px;
  width: 50%;
  box-shadow: 2px 3px 4px grey;
}
#getCharacters {
  border: 1px grey solid;
  padding: 5px;
  box-shadow: 2px 3px 4px grey;
  transition: .3s;
}
#getCharacters:hover {
  border: 1px grey solid;
  padding: 5px;
  box-shadow: 2px 3px 4px blue;
  cursor: pointer;
}
#result {
  opacity: .2;
  transition: .4s;
  color: red;
}

<h1> Character counter, enter you text to the text area below </h1>
<textarea id="contentBox"></textarea>
<span id="getCharacters">Click to get the character count</span>
<span id="displayCharacters">There are <span id="result"> ?</span> characters in the text area</span>

Try this.. actually you are reading current length only once when its NaN.. After that you are not updating the variable.. because of which you are always ending up in Else part.

element.value for updating is not defined, tried to define it globally and local, but get the same error

3 Answers3