Why an id selector with a hyphen (-) does not work with javascript

Question

Am new to javascript and only started out learning. Here I have a javascript which counts characters.

Javascript

function CheckFieldLength(fn,wn,rn,mc) {
  var len = fn.value.length;
  if (len > mc) {
    fn.value = fn.value.substring(0,mc);
    len = mc;
  }
  document.getElementById(wn).innerHTML = len;
  document.getElementById(rn).innerHTML = mc - len;
}

and the HTML

<textarea name="taMessage" id="taMessage" cols="40" rows="5" onkeyup="CheckFieldLength(taMessage, 'charcount', 'remaining', 20);" onkeydown="CheckFieldLength(taMessage, 'charcount', 'remaining', 20);" onmouseout="CheckFieldLength(taMessage, 'charcount', 'remaining', 20);"></textarea>
<br>
<small><span id="charcount">0</span> characters entered.   |   <span id="remaining">20</span> characters remaining.</small><br>

for some reason, this does not work on JsFiddle but it is working on my laptop or else i would have put up a fiddle too. But this is not my problem (though would love to know why).

Problem: The id of the textbox is = taMessage but if I change the id to = ta-Message, adding a hyphen, the scripts stops working. Replacing the above html script with the one below stops the javascript and the only difference is the hyphen. Why?

<textarea name="taMessage" id="ta-Message" cols="40" rows="5" onkeyup="CheckFieldLength(ta-Message, 'charcount', 'remaining', 20);" onkeydown="CheckFieldLength(ta-Message, 'charcount', 'remaining', 20);" onmouseout="CheckFieldLength(ta-Message, 'charcount', 'remaining', 20);"></textarea>

Answer 1

Problem: The id of the textbox is = taMessage but if I change the id to = ta-Message, adding a hyphen, the scripts stops working.

Because hyphens are not valid in variable names in Javascript.

Global keys are added to window object, when you do onkeyup="CheckFieldLength(taMessage,...);" the value taMessage is actually window.taMessage which can also be accessed as window["taMessage"].

hypen- is valid as id but not a valid variable name in Javascript neither does it work with . notation to access keys. But hyphens are supported as keys of objects, so in your case the key is fa-Message. You can use bracket notation along with parent window to access hyphenated keys like this window['ta-Message']

onkeyup="CheckFieldLength(ta-Message, 'charcount', 'remaining', 20);//Wrong
onkeyup="CheckFieldLength(window.ta-Message, 'charcount', 'remaining', 20);//Wrong
onkeyup="CheckFieldLength(window['ta-Message'], 'charcount', 'remaining', 20);//works

function log(node){
    console.log("node", node);
}

<textarea id="hyphenated-id" onclick="log(window['hyphenated-id'])"></textarea>

As noted by other comments, using this is a better option in your scenario

function log(node){
    console.log("node", node);
}

<textarea id="hyphenated-id" onclick="log(this)"></textarea>

even better is to use EventListeners to bind events.

Answer 2

That situation may be this keyword would help better, like

<textarea name="taMessage" id="ta-Message" cols="40" rows="5" onkeyup="CheckFieldLength(this.id, 'charcount', 'remaining', 20);" onkeydown="CheckFieldLength(this.id, 'charcount', 'remaining', 20);" onmouseout="CheckFieldLength(this.id, 'charcount', 'remaining', 20);"></textarea>

You can pass this.id or this.name whatever attribute that you are using in HTML tag.

I hope this simple trick help you more.