html - form タグ内の getElementById

Question

別のボックスに入力された数字に応じて、入力ボックスを「th」、「st」、「nd」、または「rd」に変更しようとしています

私のHTMLは

<input id="hole_number" name="hole_number" maxlength="3" size="3" onkeydown="stndrdth()" onkeyup="stndrdth()" onkeypress="stndrdth()" onclick="stndrdth()" onfocus="stndrdth()" onchange="stndrdth()" />
<input id="stndrdth" name="stndrdth" size="2" maxlength="2" />

私のjavascriptは次のとおりです。

function stndrdth()
{
    var theinput = document.getElementById("hole_number").value;
    var righthandnumber = theinput.charAt(theinput.length-1);
    alert('hi');


    if( righthandnumber == 1 )
    {
        document.getElementById("stndrdth").value = '{$lang['st']}';
    }
    else if( righthandnumber == 2 )
    {
        document.getElementById("stndrdth").value = '{$lang['nd']}';
    }
    else if( righthandnumber == 3 )
    {
        document.getElementById("stndrdth").value = '{$lang['rd']}';
    }
    else
    {
        document.getElementById("stndrdth").value = '{$lang['th']}';
    }


}

入力ボックスをフォームタグ内に配置するまでは、完全に正常に機能します。

<form method="get" ID="hole_form" action="./">
<input id="hole_number" name="hole_number" maxlength="3" size="3" onkeydown="stndrdth()" onkeyup="stndrdth()" onkeypress="stndrdth()" onclick="stndrdth()" onfocus="stndrdth()" onchange="stndrdth()" />
<input id="stndrdth" name="stndrdth" size="2" maxlength="2" />
</form>

それから箱はいつも空です

誰でも助けてもらえますか？

よろしくリー