web-dev-qa-db-ja.com

JavaScriptを使用してラベルテキストを変更する

次のように動作しないのはなぜですか。

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

あなたのスクリプトはラベルが（DOM内の）ページ上に存在する前に実行されるので。スクリプトをラベルの後に置くか、ドキュメントが完全にロードされるまで待ちます（ jQuery ready() や http://www.webreference.com/programming/などのOnLoad関数を使用します）。 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 link） は順番を維持し（最初にスクリプト、次にラベル）、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>
114
Konerak

.innerTextの代わりに.valueまたは.innerHTMLを試しましたか？

18
GordonM

スクリプトの実行時にlabel要素がロードされないためです。 label要素とscript要素を入れ替えれば、うまくいくでしょう。

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

代わりに.textContentを使用してください。

これを試すまでは、ラベルの値を変更することにも苦労していました。

これで解決しない場合は、この質問に示すように、オブジェクトを調べてconsole.dirを使用してコンソールに記録し、設定できるプロパティを確認してください。 HTML要素をJavaScriptとして記録する方法オブジェクト？

9
Pochi

.innerTextを使うことはうまくいくはずです。

document.getElementById('lbltipAddedComment').innerText = 'your tip has been submitted!';
7
Shilpa

JQueryを使ってラベルのテキストを変更するもう1つの方法があります。

<script>
  $("#lbltipAddedComment").text("your tip has been submitted!");
</script>

JsFiddleの例 を確認してください。

4
mustapha mekhatria

スクリプトが最初に実行されるためです。スクリプトが実行されるとき、その時点ではコントロールはロードされていません。それで、コントロールをロードした後に、あなたはスクリプトを書きます。

それが動作します。

0
Rachana

これを試して：

<label id="lbltipAddedComment"></label>
<script type="text/javascript"> 
      document.getElementById('<%= lbltipAddedComment.ClientID %>').innerHTML = 'your tip has been submitted!';
</script>
0
user1611219