getElementByIdをすることにより、入力チェックの長さは、私の最初の電卓を作る

Question

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>

が動作していないと私は問題を抱えています。キーボードで入力された数字はチェック（10を超えない）ですが、ボタンで入力された数字は...私の問題は何ですか？私は間違っているの？多分それは私のmaxlength="10"と何かですか？

Answer 1

onkeyupイベントで長さを確認しています。これは、ボックスに入力すると発生します。従って、あなたがボタンをクリックすると、そうではありません。

修正する方法の1つは、onchangeイベントでこれを確認することです。

---

更新：valueプロパティを変更すると、それを派遣していないので

また、意図したとおりに動作するよう修正するために、手動でonchangeイベントをトリガする必要があります。

JS：

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

それを行うには別の、より良い方法は、次のようになります。

JS：

if ("createEvent" in document) { 
    var evt = document.createEvent('HTMLEvents'); 
    evt.initEvent('change', false, true); 
    calculator.answer.dispatchEvent(evt); 
} 
else 
    calculator.answer.fireEvent('onchange'); 

ハンドラがより複雑になるにつれて、それはおそらくだろうインラインコマンドの代わりにボタン用の汎用ハンドラを作成する方が簡単です。

Answer 2

キーボードで入力した値はチェックされていますが、ボタンで入力された値はチェックされていないとします。あなたは関数をイベントにバインドしていますonkeyupキーが押されて入力内で解放された後にのみ発生するのは、あなたの関数をイベントにバインドすることですonchange