inputValue.valueがNULLになり値が取得できない原因が知りたい。

Question

提示コードですが以下のエラーが出る原因がわかりません。htmlコードのコメント部のコードでエラーが発生します。同じやり方で別のコードでは動くのですが今回のコードではなぜかvalueの値がNULLになります。これはなぜでしょうか？

Error

Uncaught TypeError: Cannot read properties of null (reading 'value')
    at UserName_Check (script.js:59:28)
    at HTMLInputElement.onkeyup (signup.php?token=946d7bb36162b7324bc5799eebf18f3f772018b7bd02209ad63cb932dfeba67f&mail=[e-mail]:30:92)
UserName_Check @ script.js:59
onkeyup @ signup.php?token=946d7bb36162b7324bc5799eebf18f3f772018b7bd02209ad63cb932dfeba67f&mail=[e-mail]:30

<!-- Page 3 -->
<?php 
if( (isset($_GET["token"]) == true) && (isset($_POST["confirm"]) == false) )
{
    if( GetpreAccount_OK($_GET["token"]) == true)
    {
?>

    
    <div class="center">        
    <h1> アカウント情報 登録 </h1>
    </div>

    <form class="formInput" action="signup.php?token=<?php echo $_GET["token"] ?>" method="post">
        <input type="hidden" name="mail" value=<?php echo $_GET["mail"] ?> >
<!-- -------------------------------------------------------------------------->
        <div>ユーザー名</div><input type="text" name="name" id="name" onkeyup="UserName_Check()"><div style="display: inline-block" id="name_OK"> </div>
<!-- -------------------------------------------------------------------------->


        <div>ユーザーID</div><input type="text" name="id" id="id"><div style="display: inline-block" id="ID_OK"> </div>
        <div>パスワード </div><input type="password" name="pass1" id="password_A"><div style="display: inline-block" id="password_A_OK"> </div>
        <div>もう一度パスワード</div><input type="password" name="pass2" id="password_B"><div style="display: inline-block" id="password_B_OK"> </div>
        <button type="submit" name="confirm" id="btn"> 確定 </button>
    </form>

    <script>

        UserName_Check("name","name_OK");

        if( (Password_Check("password_A","password_A_OK") == true) && (Password_Check("password_B","password_B_OK") == true) )
        {
            
        }

    </script>
    
    <?php
    }
    else
    {
        ?>

        <h1> このURLは利用できません </h1>

        <?php
    }
}
?>

/*#################### ユーザー名が利用できるかどうか？ ####################*/
function UserName_Check(name,name_OK)
{
    let inputValue = document.getElementById(name);    

    console.log(inputValue.value);
    let match = /\d/;
    if(match.test(inputValue.value) == true)
    {
        document.getElementById(name_OK).innerHTML = "<div style='color: green;'> 利用可能 </div>";
    }
    else
    {

        document.getElementById(name_OK).innerHTML = "<div style='color: red;'> 利用不可 </div>";
    }
}

Answer 1

onkeyup="UserName_Check()"

引数を渡していないため、name と name_OK は undefined という値になります。

あと、keyup イベントのイベントリスナは、<input> の値がキーボード入力により更新されるよりも前に呼ばれるので、値のチェックのタイミングとしては不適切です。入力毎にチェックするならinputイベント、まとまった単位でチェックするなら changeイベント、フォーム送信時にチェックするなら <form> の submit イベントを使います。

Comments

[退会済みユーザー]

なるほど。onkeyupのところに引数を設定したところ以下のエラーが出ますこれはなぜでしょうか？
Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
at UserName_Check (script.js:68:52)
at HTMLInputElement.onkeyup (signup.php?token=946d7bb36162b7324bc5799eebf18f3f772018b7bd02209ad63cb932dfeba67f&mail=[e-mail]:30:105)

[int32_t]

引数 name_OK の値がおかしくて getElementById() が null を返しています。

[退会済みユーザー]

なるほど。質問ですが複数のinputがある場合どうやって処理をわけるのでしょうか？

[int32_t]

> 複数のinputがある場合どうやって処理をわけるのでしょうか？

この質問には関係なさそうなので、自分の手でいろいろ試してみてから、新しい質問を立ててください。

[退会済みユーザー]

わかりました。質問ですが以下のようにしてもname_OK の値がおかしい理由がわからないのですが？
<div>ユーザー名</div><input type="text" name="name" id="name" onkeyup="UserName_Check(name,name_OK)"><div style="display: inline-block" id="name_OK"> </div>

[int32_t]

そのコードでは UserName_Check() に「変数 name と変数 name_OK」を渡しています。ここで指定すべきは「文字列 name と文字列 name_OK」です。