javascript - checking input length by getElementById is not working -

function checklength(input) {    var element = document.getelementbyid('t').value;    if(document.calculator.t.value.length == 10) {      alert("ivalid length - 10 characters only!");    }    if(element.value.length > 10) {      alert("ivalid length - 10 characters only!");    }  }

<form name="calculator">    <input type="text" maxlength="10" name="answer" id="t" onkeyup="isallowedsymbol(this);checklength(this); " placeholder="enter data" >    <br />    <input type="button" value=" 1 " onclick="calculator.answer.value += '1'" />    <input type="button" value=" 2 " onclick="calculator.answer.value += '2'" />    <input type="button" value=" 3 " onclick="calculator.answer.value += '3'" />    <input type="button" value=" + " onclick="calculator.answer.value += '+'" />    <input type="button" value=" exp " onclick="calculator.answer.value = math.exp(calculator.answer.value);" />    <br />    <input type="button" value=" 4 " onclick="calculator.answer.value += '4'" />    <input type="button" value=" 5 " onclick="calculator.answer.value += '5'" />    <input type="button" value=" 6 " onclick="calculator.answer.value += '6'" />    <input type="button" value=" - " onclick="calculator.answer.value += '-'" />    <input type="button" value=" ln "  onclick="calculator.answer.value = math.log(calculator.answer.value);" />     <br />    <input type="button" value=" 7 " onclick="calculator.answer.value += '7'" />    <input type="button" value=" 8 " onclick="calculator.answer.value += '8'" />    <input type="button" value=" 9 " onclick="calculator.answer.value += '9'" />    <input type="button" value=" &#215; " onclick="calculator.answer.value += '*'" />    <input type="button" value=" &#8730; " onclick="sqrt(calculator.answer.value)" />    <br />    <input type="button" value=" c " onclick="calculator.answer.value = ''" />    <input type="button" value=" 0 " onclick="calculator.answer.value += '0'" />    <input type="button" value=" = " onclick="calculator.answer.value = eval(calculator.answer.value)" />    <input type="button" value=" &#247; " onclick="div(calculator.answer.value)"/>    <input type="button" value=" x&#178; " onclick="sqr(calculator.answer.value)" />    <br />    <input type="button" value=" cos " onclick="calculator.answer.value = math.cos(calculator.answer.value);" />     <input type="button" value=" sin " onclick="calculator.answer.value = math.sin(calculator.answer.value);" />    <input type="button" value=" tan " onclick="calculator.answer.value = math.tan(calculator.answer.value);" />    <input type="button" value=" . " onclick=" "; />    <input type="button" value=" &larr; " onclick="backspace(calculator.answer.value);"; />    <p align=right>&#8226; &#169;</p>  </form>

making first calculator , have problem. numbers entered keyboard checking (not bigger 10), entered buttons aren't... problem? i'm doing wrong? maybe maxlength="10"?

<input type="text" maxlength="10" name="answer" id="t" onkeyup="checklength(this); " placeholder="enter data" > <br> 

you checking length on onkeyup event, fired when type in box. accordingly, when click on buttons, it's not.

one way fix check on onchange event instead.

---

update:

also, fix work intended, should manually trigger onchange event since changing value property not dispatch it.

js:

calculator.answer.value += '0'; calculator.answer.onchange(); 

another, better way be:

js:

if ("createevent" in document) {     var evt = document.createevent('htmlevents');     evt.initevent('change', false, true);     calculator.answer.dispatchevent(evt); } else     calculator.answer.fireevent('onchange'); 

as handler becomes more complex, easier create generic handler buttons instead of inline commands.