javascript - 使用JavaScript更改标签文本(Change label text using JavaScript)

Question

Why doesn't the following work for me?

(为什么以下不适合我？)

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

  ask by phil crowe translate from so

Answer 1

Because your script runs BEFORE the label exists on the page (in the DOM).

(因为您的脚本在页面上存在标签之前运行（在DOM中）。)

Either put the script after the label, or wait until the document has fully loaded (use an OnLoad function, such as the jQuery ready() or http://www.webreference.com/programming/javascript/onloads/ )

(将脚本放在标签之后，或者等到文档完全加载（使用OnLoad函数，例如jQuery ready()或http://www.webreference.com/programming/javascript/onloads/ ）)

This won't work:

(这不起作用：)

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

This will work:

(这将有效：)

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

This example (jsfiddle link) maintains the order (script first, then label) and uses an onLoad:

(这个例子（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>