2010-12-20 106 views
48

为什么不能为我工作?使用Javascript更改标签文本

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

哎呀!对不起,应该是'不'; 0 – 2010-12-20 10:24:30

+4

因为当你脚本尝试改变标签innerHtml时,lbltipAddedComment实际上不在页面上。在标签后插入脚本或使用jquery $(document).ready() – 2010-12-20 10:26:13

+0

抱歉没有看到编辑按钮! – 2010-12-20 10:27:12

回答

91

因为脚本在页面上存在标签(在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> 

This example (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> 
12

因为执行脚本时标签元素未加载。交换标签和脚本元素,它会工作:

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

哦,没有注意到!是的,如果发布的代码反映了真实的代码(没有使用jQuery来触发document.ready或类似的代码),那么这就是为什么它不起作用的原因。 – GordonM 2010-12-20 10:30:40

14

你试过.innerText.value代替.innerHTML

+5

.value不会为标签工作 - 给出未定义的输出 – 2012-11-12 09:22:12

+0

.innerText适用于标签。我有中的Script标签和中的设计。尽管它对我来说工作得很好。 – Jai 2014-09-22 17:40:17

+1

在Firefox上,只有'.textContent'目前可用。 – 2015-07-29 12:48:24

0

因为脚本将得到执行第一..when脚本将得到执行那个时候加载控件后控件没有得到loaded.so你写剧本,将工作

7

使用.innerText应该工作。

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

改为使用.textContent

我一直在努力改变标签的价值,直到我尝试过。

如果这不能解决尝试检查对象,以查看您可以通过它登录到与console.dir控制台设置什么样的属性在这个问题上,如图所示:How can I log an HTML element as a JavaScript object?

+0

谢谢。我怀疑(但没有严格证实)我的用例与问题中的相似:我试图检索和/或更改具有嵌套输入元素的标签的文本,例如,我想在这里检索和/或更改''输入信息:“'以下部分:' '。只有'.textContent'工作,没有'.innerHTML','.innerText'或'.value'工作。 (免责声明:我只在Chrome中检查过。) – 2017-10-31 02:06:40

-2

试试这个:

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

欢迎您提供解决方案的链接,但请确保您的答案在没有它的情况下有用:[在链接周围添加上下文](// meta.stackexchange.com/a/8259 ),所以你的同行用户将会知道它是什么以及它为什么在那里,然后引用你链接到的页面中最相关的部分,以防目标页面不可用。 [仅仅是一个链接的答案可能会被删除。](// stackoverflow.com/help/deleted-answers) – paper1111 2018-02-10 08:50:07