textarea live character counting + Preview not working

Question

I am trying to get live character count + live preview of an textarea usign pure JS no Jquery, but getting some error. Here my code

var wpcomment = document.getElementById('text');

wpcomment.onkeyup = wpcomment.onkeypress = function(){
    document.getElementById('DrevCom').innerHTML = this.value;
}
function count()
{
  var total=document.getElementById("text").value;
  total=total.replace(/\s/g, '');
  document.getElementById("total").innerHTML="Total Characters:"+total.length;
}

<textarea id="text" onkeyup="count();"  placeholder="Add comments:"></textarea>



<p id="total">Total Characters:0</p>
<div id="DrevCom"></div>

Dont see any error - what error are you seeing? You're never calling `count` by the looks of it. — Jamiec, Jan 30 '18 at 18:17

score 1 · Accepted Answer · answered Jan 30 '18 at 18:18

You are setting the onkeyup property in HTML to count(), and then you are overwriting it with Javascript. You can only have one onKeyup property, so either use an event listener instead, or have the one function call the other.

var wpcomment = document.getElementById('text');

wpcomment.onkeyup = wpcomment.onkeypress = function(){
    document.getElementById('DrevCom').innerHTML = this.value;
    count()
}
function count()
{
  var total=document.getElementById("text").value;
  total=total.replace(/\s/g, '');
  console.log(total);
  document.getElementById("total").innerHTML="Total Characters:"+total.length;
}

<textarea id="text"  placeholder="Add comments:"></textarea>



<p id="total">Total Characters:0</p>
<div id="DrevCom"></div>

Having only one event listener should be the way to go, and you can then split the code inside that listener in multiple functions if you want. — XCS, Jan 30 '18 at 18:20

textarea live character counting + Preview not working

1 Answers1