function validateInput(input) {
var text = document.getElementById('t').value;
if(document.calculator.t.value.length == 10) {
alert("Invalid length - only 10 characters allowed!");
}
if(text.length > 10) {
alert("Invalid length - only 10 characters allowed!");
}
}<form name="calculator">
<input type="text" maxlength="10" name="answer" id="t" onkeyup="isAllowedSymbol(this);validateInput(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=" × " onclick="calculator.answer.value += '*'" />
<input type="button" value=" √ " 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=" ÷ " onclick="div(calculator.answer.value)"/>
<input type="button" value=" x² " 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=" ← " onclick="backspace(calculator.answer.value);"; />
<p align=right>• ©</p>
</form>I am developing my first calculator and encountering an issue. The validation for input via the keyboard is working correctly (not allowing more than 10 characters), but for inputs through buttons it's not... what could be causing this problem? Am I doing something wrong with my maxlength="10" attribute?
<input type="text" maxlength="10" name="answer" id="t" onkeyup="validateInput(this); " placeholder="Enter data" > <br>