CODEWITHSUNDEEP
javascripthtmlcss
Cергій Крепкій
Cергій Крепкій

Reputation: 17

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 my first calculator and I have a problem. Numbers entered by keyboard are checking (not bigger than 10), but those entered by buttons aren't... what is my problem? what I'm doing wrong? Maybe it is something with my maxlength="10"?

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

Upvotes: 0

Views: 63

Answers (2)

Frederik.L
Frederik.L

Reputation: 5620

You are checking the length on the onkeyup event, which is fired when you type in the box. Accordingly, when you click on buttons, it's not.

One way to fix it would be to check this on the onchange event instead.

Update:

Also, for that fix to work as intended, you should manually trigger the onchange event since changing the value property does not dispatch it.

JS:

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

Another, better way to do it would 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 the handler becomes more complex, it would probably be easier for you to create a generic handler for your buttons instead of inline commands.

Upvotes: 2

Sergio Fandino
Sergio Fandino

Reputation: 435

You say that values entered by keyboard are getting checked, but those entered with buttons aren't. The thing is you're binding the function to the event onkeyup which only occurs after key is pressed and the released inside the input, you should bind your function to the event onchange

Upvotes: 1

Related Questions