正文 

当前位置： 首页 > 源码 >

如何使用javascript更改按钮文本

     2023-02-22     91

关键词：

【中文标题】如何使用javascript更改按钮文本【英文标题】：How to change the buttons text using javascript 【发布时间】：2011-10-25 12:53:22 【问题描述】：

我有以下代码通过javascript代码设置按钮的文本，但它不起作用它保持不变，文本保持不变。

function showFilterItem() 
    if (filterstatus == 0) 
        filterstatus = 1;
        $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
        document.getElementById("ShowButton").innerHTML = "Hide Filter";
    
    else 
        filterstatus = 0;
        $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
        document.getElementById("ShowButton").innerHTML = "Show filter";

而我的html按钮代码是

  <input  class="button black" id="ShowButton" type="button" runat="server"  value="Show Filter" onclick="showFilterItem()" />

【问题讨论】：

Changing button text and not value using JavaScript 【参考方案1】：

如果HTMLElement 是input[type='button']、input[type='submit'] 等

<input id="ShowButton" type="button" value="Show">
<input id="ShowButton" type="submit" value="Show">

使用此代码更改它：

document.querySelector('#ShowButton').value = 'Hide';

如果HTMLElement 是button[type='button']、button[type='submit'] 等：

<button id="ShowButton" type="button">Show</button>
<button id="ShowButton" type="submit">Show</button>

使用这些方法中的任何一种进行更改，

document.querySelector('#ShowButton').innerHTML = 'Hide';
document.querySelector('#ShowButton').innerText = 'Hide';
document.querySelector('#ShowButton').textContent = 'Hide';

请注意

input 是 empty tag 并且不能拥有 innerHTML、innerText 或 textContent button 是一个容器标签并且可以有innerHTML、innerText或textContent

如果您不使用 asp.net-web-forms、asp.net-ajax 和 rad-grid，请忽略此答案

您必须使用value 而不是innerHTML。

试试这个。

document.getElementById("ShowButton").value= "Hide Filter";

由于您在server 处运行按钮，ID 可能会在框架中被破坏。我是，试试吧

document.getElementById('<%=ShowButton.ClientID %>').value= "Hide Filter";

另一种更好的方法是这样的。

在标记上，像这样更改您的 onclick 属性。 onclick="showFilterItem(this)"

现在这样使用

function showFilterItem(objButton) 
    if (filterstatus == 0) 
        filterstatus = 1;
        $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
        objButton.value = "Hide Filter";
    
    else 
        filterstatus = 0;
        $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
        objButton.value = "Show filter";

【讨论】：

正在寻找这个：document.getElementById("ShowButton").value="Hide Filter";谢谢！ 这个答案已经过时，现在不正确，应该删除它。 @Maitreya OP 使用的是&lt;input type="button"&gt;，所以element.value 是更改按钮显示文本的正确方法。 innerText、innerHTML 和 textContent 如果您使用的是 &lt;button&gt;&lt;/button&gt;，则将被使用，因为它有一个开始和结束标签。 这个答案很有帮助！我找了好久document.querySelector('#ShowButton').value = 'Hide';....【参考方案2】：

innerText 是当前的正确答案。其他答案已过时且不正确。

document.getElementById('ShowButton').innerText = 'Show filter';

innerHTML 也可以，可以用来插入 HTML。

【讨论】：

你是对的。谢谢您的帮助。 .value 在 Chrome 中不起作用，但 .innerText 可以。 这不是 OP 特定问题的正确答案。 &lt;input&gt; 没有 innerText【参考方案3】：

我知道这个问题已经得到解答，但我也看到还有另一种方法缺失，我想介绍它。有多种方法可以实现这一目标。

1-innerHTML

document.getElementById("ShowButton").innerHTML = 'Show Filter';

您可以在其中插入 HTML。但是这种方法的缺点是，它有跨站安全攻击。因此，对于添加文本，出于安全原因，最好避免这种情况。

2-innerText

document.getElementById("ShowButton").innerText = 'Show Filter';

这也将实现结果，但它在引擎盖下很重，因为它需要一些布局系统信息，因此会降低性能。与innerHTML 不同，您不能使用它插入HTML 标记。 Check Performance Here

3-文本内容

document.getElementById("ShowButton").textContent = 'Show Filter';

这也将实现相同的结果，但它没有像 innerHTML 这样的安全问题，因为它不像 innerText 那样解析 HTML。此外，由于性能提高，它也很轻。

因此，如果必须像上面那样添加文本，那么最好使用 textContent。

【讨论】：

我的按钮是这样的： 所以使用 value 不起作用，但使用 textContent 就可以了。感谢分享！【参考方案4】：

另一种解决方案是在 if else 语句中使用 jquery 按钮选择器 $("#buttonId").text("your text");

function showFilterItem() 
if (filterstatus == 0) 
    filterstatus = 1;
    $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
    $("#ShowButton").text("Hide Filter");

else 
    filterstatus = 0;
    $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
     $("#ShowButton").text("Show Filter");

【讨论】：

【参考方案5】：

您可以像这样切换filterstatus 值

filterstatus ^= 1;

所以你的函数看起来像

function showFilterItem(objButton) 
if (filterstatus == 0) 
    $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().showFilterItem();
    objButton.value = "Hide Filter";

else 
    $find('<%=FileAdminRadGrid.ClientID %>').get_masterTableView().hideFilterItem();
    objButton.value = "Show filter";

  filterstatus ^= 1;

【讨论】：

如何使用 JavaScript 更改 span 元素的文本？

】如何使用JavaScript更改span元素的文本？【英文标题】：HowdoIchangethetextofaspanelementusingJavaScript?【发布时间】：2010-11-2410:25:39【问题描述】：如果我有一个span，说：<spanid="myspan">hereismytext</span>如何使用JavaScript将“hereismyte... 查看详情

如何使用 DOM 通过单选按钮更改背景大小（JAVASCRIPT）

】如何使用DOM通过单选按钮更改背景大小（JAVASCRIPT）【英文标题】：HowtouseDOMtochangebackground-sizewithradiobuttons(JAVASCRIPT)【发布时间】：2022-01-0212:22:52【问题描述】：我想问一下是否有替代方法。我对javascript很陌生我有3个单选按钮... 查看详情

如何使用 react 和 javascript 每秒更改部分文本的字体颜色？

】如何使用react和javascript每秒更改部分文本的字体颜色？【英文标题】：Howtochangefontcolorforpartoftexteverysecondusingreactandjavascript?【发布时间】：2021-01-1323:47:15【问题描述】：我想使用react和javascript每秒更改部分文本的字体颜色。这... 查看详情

单击时 JavaScript 按钮文本 innerHTML 未更改

】单击时JavaScript按钮文本innerHTML未更改【英文标题】：JavaScriptButtonTextinnerHTMLnotChangingwhenClicked【发布时间】：2019-02-0909:13:18【问题描述】：我对javascript比较陌生，我试图找出为什么元素的文本内容在应该改变的时候没有改变。... 查看详情

如何在颤动中更改文本按钮颜色？

】如何在颤动中更改文本按钮颜色？【英文标题】：Howtochangethetextbuttoncoloronpressinflutter?【发布时间】：2021-12-1413:27:15【问题描述】：我想使用Flutter在我的应用程序中创建一个页面，人们可以在其中从我使用文本按钮创建的选项... 查看详情

如何使用 javascript 和按钮更改图像的不透明度？

】如何使用javascript和按钮更改图像的不透明度？【英文标题】：Howtochangeopacityofimageswithjavascriptandbuttons?【发布时间】：2017-09-1316:47:20【问题描述】：在不更改任何HTML的情况下，我需要3个按钮，每个数字一个，当我单击第一个按... 查看详情

如何使用javascript动态更改html中svg的文本内容

】如何使用javascript动态更改html中svg的文本内容【英文标题】：Howtodynamicallychangethetextcontentofsvginhtmlwithjavascript【发布时间】：2015-09-2215:57:59【问题描述】：我的要求是从g和另一个文本元素中删除文本元素。但是当我运行这段代... 查看详情

如何更改导航栏中按钮文本的字体大小？

】如何更改导航栏中按钮文本的字体大小？【英文标题】：HowdoIchangethefontsizeofthebuttontextinmynavbar?【发布时间】：2012-09-1120:18:27【问题描述】：我正在使用jQueryMobile制作一个移动网站。在页面中，我使用了一个带有三个按钮的导... 查看详情

Swiftui：如何更改文本字段键盘返回按钮的文本和颜色

】Swiftui：如何更改文本字段键盘返回按钮的文本和颜色【英文标题】：Swiftui:Howtochangethetextandcoloroftextfieldkeyboardreturnbutton【发布时间】：2020-09-0800:16:16【问题描述】：在swiftui中使用Texfield时，是否可以自定义用户点击文本字段时... 查看详情

如何更改 matplotlib 按钮中的文本大小？

】如何更改matplotlib按钮中的文本大小？【英文标题】：HowtochangethetextsizeinamatplotlibButton?【发布时间】：2017-06-0813:27:05【问题描述】：我在matplotlib中有一个按钮，即myButton=Button(axpos,\'Thisisabutton\')如何让按钮内的文字变小？【问题... 查看详情

如何更改按钮悬停属性中的文本颜色

】如何更改按钮悬停属性中的文本颜色【英文标题】：Howtochangetextcolorinbuttonhoverproperty【发布时间】：2015-02-1107:34:59【问题描述】：我使用本指南自定义了我使用bootstrap制作的网页中的按钮：ChangehovercoloronabuttonwithBootstrapcustomizati... 查看详情

如何使用 onclick 按钮更改悬停颜色

】如何使用onclick按钮更改悬停颜色【英文标题】：Howtochangehovercolorusingonclickbutton【发布时间】：2021-06-0411:47:02【问题描述】：我想在页面中切换多种颜色，例如主题更改。我成功更改了文本颜色、文本背景颜色、形状颜色、按... 查看详情

使用javascript按下开始按钮时，我应该如何突出显示textarea中的文本？

】使用javascript按下开始按钮时，我应该如何突出显示textarea中的文本？【英文标题】：Howshouldihighlightatextintextareawhenpressstartbuttonusingjavascript?【发布时间】：2015-08-1521:54:58【问题描述】：我是JavaScript的初学者。有人可以帮我吗？... 查看详情

如何使用 Jquery 更改按钮单击时的 django 外键对象文本选择字段？

】如何使用Jquery更改按钮单击时的django外键对象文本选择字段？【英文标题】：HowtochangedjangosforeignkeyobjectstextchoicefieldonbuttonclickwithJquery?【发布时间】：2020-07-0210:15:47【问题描述】：我有2个模型ToDoList和Tasks。在Tasks模型中，我将... 查看详情

如何更改iOS中推送通知的消息按钮文本？

】如何更改iOS中推送通知的消息按钮文本？【英文标题】：HowtochangethetextofmessagebuttonsofpushnotificationiniOS?【发布时间】：2011-01-2613:36:43【问题描述】：我正在使用Apple推送通知，当我收到新通知时，会出现一条带有两个按钮的消息... 查看详情

如何在提交表单后使用“加载”更改按钮文本并在以角度提交后重置表单

】如何在提交表单后使用“加载”更改按钮文本并在以角度提交后重置表单【英文标题】：howtochangebuttontextwith\'Loading\'aftersubmitformandresetformaftersubmitinangular【发布时间】：2018-04-0917:14:29【问题描述】：varapp=angular.module(\'snc\',[]);app... 查看详情

如何使用javascript在asp.net中gridview内的按钮单击上应用文本框空白验证？

】如何使用javascript在asp.net中gridview内的按钮单击上应用文本框空白验证？【英文标题】：Howtoapplytextboxblankvalidationonbuttonclickinsidegridviewinasp.netusingjavascript?【发布时间】：2012-05-1919:03:55【问题描述】：如何在javascript中的gridview内... 查看详情

如何更改 Vuetify 按钮的文本颜色？

】如何更改Vuetify按钮的文本颜色？【英文标题】：HowtochangethetextcolorofaVuetifybutton?【发布时间】：2019-02-1422:33:40【问题描述】：也许我遗漏了一些明显的东西，但我无法找出更改v-btn中文本颜色的正确方法。这可行，但必须使用!i... 查看详情