使用 JavaScript 更改标签文本

Question

为什么以下对我不起作用？

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

Answer 1

因为您的脚本在标签存在于页面（在 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 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>

Answer 2

您是否尝试过 .innerText 或 .value 而不是 .innerHTML？

Answer 3

因为执行脚本时并没有加载标签元素。交换标签和脚本元素，它就会起作用：

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

Answer 4

这是使用 jQuery 更改标签文本的另一种方法：

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

查看 JsFiddle 示例

Answer 5

请改用 .textContent。

我也在努力改变标签的价值，直到我尝试了这个。

如果这不能解决问题，请尝试检查对象以查看可以通过使用 console.dir 将其记录到控制台来设置哪些属性，如以下问题所示：如何将 HTML 元素记录为 JavaScript 对象？

Answer 6

使用 .innerText 应该可以。

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

Answer 7

试试这个：

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

Answer 8

显然有几种方法可以更改标签的文本，我在下面找到了这个链接页面，其中对每种方法都有解释（文本很多，所以我在这里只附加了示例）。

就我而言，即使在上传标签后使用 javascript 代码，它们也不起作用，因为我使用 ESP32 作为服务器，并使用 Arduino IDE 上传页面，出于某种原因，IDE (1.8.19)没有从我放置文件的新位置读取文件，我必须删除旧文件夹，关闭IDE，然后才能更新文件，我在查看页面源代码时发现了这一点在浏览器中。

如何使用 JavaScript 更改标签文本？

可以使用以下方法来更改标签文本
JavaScript：

“innerHTML”属性。
    “innerText”属性。
    jQuery“text()”和“html()”方法。

“innerHTML”属性：

<前><代码><中心><正文>
<标签 id = "lbl">DOM;

单击此处

函数标签文本(){
让 get = document.getElementById('lbl')
get.innerHTML= "缩写名称为文档对象模型";
}

“innerText”属性：

<前><代码><中心><正文>
输入名称：

<标签 id="lbl">不适用

函数标签文本() {
让 get = document.getElementById('lbl');
让 name = document.getElementById('name').value;
get.innerText = 名称；
}

jQuery“text()”和“html()”方法：

<脚本 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
<中心><主体>
这是以下网站：



<标签 id = "lbl2">内容：



点击访问网站
单击内容


函数标签文本() {
 $('#lbl1').text("Linuxhint")
}
函数 labelText2() {
 $('#lbl2').html("JavaScript")
}

https://linuxhint.com/change-label-text-javascript/

Answer 9

问题是页面未加载，因此元素未呈现。
所以你的代码找不到'lbltipAddedComment'

<label id="lbltipAddedComment"></label>

避免此类问题的最好方法是将你的代码包装

document.onload(){}  or jQuery.ready(){} functions

在使用jQuery.ready()之前，我们必须确保JQuery存在。