如何在javascript中将文本分配给标签？

Posted 2023-05-07

【中文标题】如何在javascript中将文本分配给标签？

【英文标题】：How to assign a text to label in javascript?

【发布时间】：2014-02-10 12:57:52

【问题描述】：

我正在使用 RegularExpressionValidator 来验证文本框。

现在如果文本框有效，我需要在标签控件上显示“页面有效”消息。

我是在后面的代码中执行此操作，还是在 javascript 本身中声明标签？

在javascript中我尝试过使用：

document.getElementById("LabelId").innerText="Your Text Here"

但它显示 Microsoft JScript 运行时错误：

无法设置属性“innerText”的值：对象为空或 未定义”。

我也尝试过使用innerhtml，但它显示了类似的错误。那么为标签赋值的正确方法是什么？ 编辑：下面是我的aspx编码：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"        
CodeBehind="RegularExpressionValidator.aspx.cs" Inherits="ValidationTask.WebForm3" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:Label ID="LabelText" runat="server" Text="Label"></asp:Label><br />
<script type="text/javascript" language="javascript">
   function ValidatePage() 
       debugger;
       if (Page_IsValid) 
           document.getElementById('<%= LabelText.ClientID %>').innerHTML = 'Page Is Valid';
       
       else 
           document.getElementById('<%= LabelText.ClientID %>').innerHTML = 'Page is Invalid';
       
    
</script>  
<asp:Label ID="LabelZip" runat="server" Text="Enter Zip Code"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<asp:Button ID="Button1" runat="server" Text="Enter" OnClientClick="return ValidatePage()"  />

<asp:RegularExpressionValidator ID="RegularExpressionValidator1" ControlToValidate="TextBox1" 
ValidationExpression="\d5" runat="server" ErrorMessage="The zip code must be 5 numeric   
digits"></asp:RegularExpressionValidator>
</asp:Content>

提前致谢。

P.S.我是新来的，这是我的第一个问题。如有错误请忽略。

【问题讨论】：

尝试在文档加载或准备就绪时添加代码。当在 dom 中找不到元素时，会发生 Object undefined 或 null。参考***.com/questions/4488714/…

尝试使用标签的客户端 ID.... 像 "<%=LabelId.clientID%>" 或使用检查元素

你能检查元素并确保你有正确的 id 吗？

你在使用母版页吗？？

@HarshadaChavan 谢谢。我已经引用了您发布的链接，并且已经实现了相同的链接。没有任何错误，但是标签的值没有显示出来。

【参考方案1】：

document.getElementById("LabelId").innerText="Your Text Here"

听起来您的元素在页面上找不到。仔细检查 ID 以确保它存在。最简单的方法是只查看 html 以确保您使用的是正确的 ID。将 asp.Net 标签定义为服务器端控件时要记住的一件事是，客户端 ID 是指定 ID 和标签祖先的 ID 的串联。这意味着您不能直接在 JavaScript 中引用服务器端 ID，因为它只是完整客户端 ID 的一部分。您可能必须使用通配符指定它。

如果您需要使用通配符，在 Jquery 中可能会更容易

$('[id*=LabelId]')

这意味着您必须添加对 JQuery 的脚本引用。

【讨论】：

感谢先生的快速回复。我已经尝试过了，但是显示了这个错误。“Microsoft JScript 运行时错误：属性 '$' 的值为 null 或未定义，不是函数对象”

他确实说过“这意味着您必须添加对 JQuery 的脚本引用”，听起来您还没有这样做

是的，抱歉，我没有指定您需要为该解决方案添加 Jquery。但是，我会确保元素首先按该 ID 在页面上。如果添加服务器端 asp.net 标签，则客户端 id 将是指定 id 及其祖先的 id 的串联。先检查一下

【参考方案2】：

客户端 ID 的生成

在浏览器中查看页面的源代码。这将为您提供有关如何生成客户端 ID 的良好指示。每个元素 ID 应该是唯一的，并且使用母版页和控件，您和 .NET 框架将很难产生这样的结果。如果您使用带有内容占位符的母版页，您会注意到您的元素 ID 是根据它们所在的内容占位符的名称生成的。

这是一个很好的Code Project article，关于客户端 ID 的生成。

验证

在您的情况下，使用RegularExpressionValidator 将在按下按钮时触发页面验证器如果有效导致页面被回发到服务器。最好在后面的代码中添加代码。在这种情况下，@SachinScriptManager.RegisterStartupScript 之类的东西应该在按钮的事件处理程序中工作。

假设您只有一个字段：您可以将验证器转换为 CustomFieldValidator 并通过 javascript 触发正则表达式。如果值正确，您可以在 javascript 中设置标签文本，而无需进行任何回发，但是一旦页面回发，您可能会丢失标签的状态。

编辑： jQuery

我经常使用jQuery selectors 引用我的元素，因为我不想为生成的客户端 ID 烦恼。您可以使用Ends With Selector 获取您的元素，如下所示：

var name = $('input[id$="txtName"]'); // Find an element that ends with "txtName".

请记住，当您在生成的页面上的多个位置有一个以相同名称结尾的元素时，可能会发生冲突。

【参考方案3】：

在 ASP.Net Web 表单中，服务器上的每个控件都有一个名为 ClientID 的属性。这是您可以在客户端使用的生成的 ID。因此，要在客户端为带有 的标签设置标签，您可以做的一种方法是使用服务器端 RegisterStartupScript 在客户端变量中获取 clientId -

//server side code
page_load()
 ScriptManager.RegisterStartupScript("IDs", string.format("var labelId = '0';", label1.ClientID);


//in javascript
document.getElementById(labelId).innerHTML = 'whatever';

顺便说一句，我刚刚看过这段代码，所以它可能无法按原样运行。