1. ホーム
  2. javascript

[解決済み] JavaScriptでラベルの文字を変更する

2022-02-11 11:25:30

質問

以下のようにするとうまくいかないのですが?

<script>
    document.getElementById('lbltipAddedComment').innerHTML = 'Your tip has been submitted!';
</script>
<label id="lbltipAddedComment"></label>

解決方法は?

ラベルがページ上(DOM上)に存在する前にスクリプトが実行されているからです。スクリプトをラベルの後に置くか、ドキュメントが完全に読み込まれるまで待つ(例えば、以下のような OnLoad 関数を使用する)必要があります。 jQuery ready() または http://www.webreference.com/programming/javascript/onloads/ )

これはうまくいきません。

<script>
  document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>
<label id="lbltipAddedComment">test</label>

これでうまくいきます。

<label id="lbltipAddedComment">test</label>
<script>
  document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';
</script>

この例(jsfiddleのリンク) は、順番(スクリプトが先、ラベルが後)を維持し、onLoad を使用します。

<label id="lbltipAddedComment">test</label>
<script>
function addLoadEvent(func) {  
      var oldonload = window.onload;  
      if (typeof window.onload != 'function') {  
        window.onload = func;  
      } else {  
        window.onload = function() {  
          if (oldonload) {  
            oldonload();  
          }  
          func();  
        }  
      }  
    }  

   addLoadEvent(function() {  
document.getElementById('lbltipAddedComment').innerHTML = 'your tip has been submitted!';

    });  
</script>