1. ホーム
  2. javascript

[解決済み] Javascript Idで要素を取得し、値を設定する

2023-05-06 18:23:06

質問

javascriptの関数で、パラメータを渡すものがあります。パラメータは、私のウェブページの要素(隠しフィールド)のIDを表しています。私はこの要素の値を変更したい。

function myFunc(variable){
  var s= document.getElementById(variable);
  s.value = 'New value'
}

これを実行すると、オブジェクトがNULLなので値を設定できないというエラーが出ます。しかし、ブラウザによって生成されたhtmlコードで見ているので、オブジェクトがヌルでないことは分かっています。 とにかく、私はデバッグのために次のコードを試してみました。

function myFunc(variable){
  var x = variable;
  var y  = 'This-is-the-real-id'
  alert(x + ', ' + y)
  var s= document.getElementById(x);
  s.value = 'New value'
}

アラートメッセージが表示されたとき、両方のパラメータは同じですが、まだエラーが発生します。しかし、次のようにするとすべてうまくいきます。

  var s= document.getElementById('This-is-the-real-id');
  s.value = 'New value'

どのように私はこれを修正することができますしてください

編集

値を設定する要素はhiddenフィールドで、idはページが読み込まれたときに動的に決定されます。$(document).ready関数に以下を追加してみましたが、うまくいきませんでした。

どのように解決するのですか?

textareaがページにレンダリングされる前にmyFunc(変数)が実行されると、null例外エラーが発生します。

<html>
    <head>
    <title>index</title>
    <script type="text/javascript">
        function myFunc(variable){
            var s = document.getElementById(variable);
            s.value = "new value";
        }   
        myFunc("id1");
    </script>
    </head>
    <body>
        <textarea id="id1"></textarea>
    </body>
</html>
//Error message: Cannot set property 'value' of null 

というわけで、textareaがページ内に存在することを確認し、myFuncを呼び出すには、window.onloadまたは$(document).ready関数を使うことができます。 お役に立てれば幸いです。