Javascript not working but works fine when put breakpoints and click the file from chrome debugger tools

Question

So i am facing a weird issue. A part of my javascript code which is a function is not working but when i put breakpoints and click the file after going to sources in chrome, the breakpoint starts working and my Javascript function runs perfect.(I can see the output.) Here is my code. Please tell why i am facing this issue?

HTML code.....

<textarea type="text" class="input-content" onchange="count(this)"></textarea>
<p class="character-count"></p>

Javascript

function count(char){
char.onkeyup = function () { 
        var text_max = 99;
        var text_length = this.value.length;
        var text_remaining = text_max - text_length;
        char.parentNode.getElementsByClassName("character-count")[0].innerHTML = "Character count:" + text_length + "/" + text_max;
  }
}

mplungjan · Accepted Answer · 2016-04-16 16:51:49Z

2

You are assigning a keyup event handler in an onchange. That will not work since onchange does not trigger until you leave the field. Do it on focus but do not add a new event handler if it already has one.

Note I removed the inline event handler which is not good practice. I loop because I assume you may have more than one field you want to add the counter to.

function count(){
  if (!this.onkeyup) this.onkeyup = function () { 
        var text_max = 99;
        var text_length = this.value.length;
        var text_remaining = text_max - text_length;
        this.parentNode.getElementsByClassName("character-count")[0].innerHTML = "Character count:" + text_length + "/" + text_max;
  }
}
window.onload=function() {
  var msgs = document.querySelectorAll(".input-content");
  for (var i=0;i<msgs.length;i++) {
     msgs[i].onfocus=count;
  }
}

<div><textarea type="text" class="input-content"></textarea>
<p class="character-count"></p>
</div>

You could do all this onkeyup on its own instead

window.onload=function() {
  var msgs = document.querySelectorAll(".input-content");
  for (var i=0;i<msgs.length;i++) {
     msgs[i].onkeyup=function () { 
        var text_max = 99;
        var text_length = this.value.length;
        var text_remaining = text_max - text_length;
        this.parentNode.getElementsByClassName("character-count")[0].innerHTML = "Character count:" + text_length + "/" + text_max;
    };
  }
}

<div><textarea type="text" class="input-content"></textarea>
<p class="character-count"></p>
</div>

edited Apr 16, 2016 at 16:51

answered Apr 16, 2016 at 16:40

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mainak Bhattacharjee Over a year ago

Thanks for your effort. I am new to javascript hence new to these concepts. Learnt a lot from your explanation.

mplungjan Over a year ago

You are welcome. I kept as much of your concepts in my first version but decided to post a shorter one too

CodingWithSpike · Accepted Answer · 2016-04-16 16:42:01Z

the onchange event isn't fired until you leave the textarea (it loses focus).

You are also incorrectly adding a keyup event handler on change. So what is happening is that every time you unfocus the textarea, you are replacing the keyup handler.

I think what you want is to just use onkeyup on the element, like this:

function count(textareaElement){
        var text_max = 99;
        var text_length = textareaElement.value.length;
        var text_remaining = text_max - text_length;
        textareaElement.parentNode.getElementsByClassName("character-count")[0].innerHTML = "Character count:" + text_length + "/" + text_max;

}

<textarea type="text" class="input-content" onkeyup="count(this)"></textarea>
<p class="character-count"></p>

Collectives™ on Stack Overflow

Javascript not working but works fine when put breakpoints and click the file from chrome debugger tools

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related