更改按钮文本 onclick
Posted
技术标签:
【中文标题】更改按钮文本 onclick【英文标题】：Changing button text onclick 【发布时间】：2012-05-27 02:56:35 【问题描述】：当我点击myButton1 按钮时，我希望值从Open Curtain 更改为Close Curtain。HTML：
<input onclick="change()" type="button" value="Open Curtain" id="myButton1"></input>
Javascript：
function change();
document.getElementById("myButton1").value="Close Curtain";
按钮现在显示开窗帘，我想把它改成关窗帘，对吗？
【问题讨论】：
【参考方案1】：function change()
myButton1.value=="Open Curtain" ? myButton1.value="Close Curtain" : myButton1.value="Open Curtain";
【讨论】：
这与alphapilgrim 的this Answer 有什么不同？【参考方案2】：我知道这是一篇旧帖子，但可以选择通过函数调用发送 elemd id：
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
<button id='expand' class='btn expand' onclick='f1(this)'>Expand</button>
function f1(objButton)
if (objButton.innerhtml=="EXPAND") objButton.innerHTML = "MINIMIZE";
else objButton.innerHTML = "EXPAND";
【讨论】：
【参考方案3】：这段代码对我有用
var btn = document.getElementById("your_btn_id");
if(btn.innerText=="show")
btn.innerText="hide";
else
btn.innerText="show";
在我的情况下使用值不起作用
【讨论】：
【参考方案4】：var count=0;
document.getElementById("play").onclick = function()
if(count%2 =="1")
document.getElementById("video").pause();
document.getElementById("play").innerHTML ="Pause";
else
document.getElementById("video").play();
document.getElementById("play").innerHTML ="Play";
++count;
【讨论】：
【参考方案5】：或者更简单，无需命名元素（带有'button'元素）：
<button onclick="toggleLog(this)">Stop logs</button>
和脚本：
var bWriteLog = true;
function toggleLog(elt)
bWriteLog = !bWriteLog;
elt.innerHTML = bWriteLog ? 'Stop logs' : 'Watch logs';
【讨论】：
【参考方案6】：将此函数添加到脚本中
function myFunction()
var btn = document.getElementById("myButton");
if (btn.value == "Open Curtain")
btn.value = "Close Curtain";
btn.innerHTML = "Close Curtain";
else
btn.value = "Open Curtain";
btn.innerHTML = "Open Curtain";
并编辑按钮
<button onclick="myFunction()" id="myButton" value="Open Curtain">Open Curtain</button>
【讨论】：
【参考方案7】：这对我来说很好。我有多个按钮，我想将输入值文本从“添加范围”切换到“删除范围”
<input type="button" onclick="if(this.value=='Add Range') this.value='Remove Range'; else this.value='Add Range'; " />
【讨论】：
【参考方案8】：如果您更喜欢在 html 标记之外（在 javascript 中）绑定您的事件，您可以这样做：
document.getElementById("curtainInput").addEventListener(
"click",
function(event)
if (event.target.value === "Open Curtain")
event.target.value = "Close Curtain";
else
event.target.value = "Open Curtain";
,
false
);<!doctype html>
<html>
<body>
<input
id="curtainInput"
type="button"
value="Open Curtain" />
</body>
</html>【讨论】：
【参考方案9】：当使用<button> 元素（或者可能是其他元素？）时，设置“值”不会更改文本，但innerHTML 会。
var btn = document.getElementById("mybtn");
btn.value = 'my value'; // will just add a hidden value
btn.innerHTML = 'my text';
打印到控制台时：
<button id="mybtn" class="btn btn-primary" onclick="confirm()" value="my value">my text</button>
【讨论】：
这对我很有帮助。效果很好。在我看来，所有这些中最简单最直接的答案。innerHTML 更改按钮的视觉文本。 value="" 不可见，只保存隐藏数据。谢谢老兄。【参考方案10】：
<!DOCTYPE html>
<html>
<head>
<title>events2</title>
</head>
<body>
<script>
function fun()
document.getElementById("but").value = "onclickIChange";
</script>
<form>
<input type="button" value="Button" onclick="fun()" id="but" name="but">
</form>
</body>
</html>
【讨论】：
【参考方案11】：如果不反对或者可能已经在使用 jQuery，你可以做到这一点，而不必使用突兀的 js。希望能帮助到你。 https://en.wikipedia.org/wiki/Unobtrusive_JavaScript 也想参考，https://***.com/a/3910750/4812515 对此进行讨论。
HTML：
<input type="button" value="Open Curtain" id=myButton1"></input>
Javascript：
$('#myButton1').click(function()
var self = this;
change(self);
);
function change( el )
if ( el.value === "Open Curtain" )
el.value = "Close Curtain";
else
el.value = "Open Curtain";
【讨论】：
【参考方案12】：这可以通过 vbs 代码轻松完成（因为我对 js 不太熟悉）
<input type="button" id="btn" Value="Close" onclick="check">
<script Language="VBScript">
sub check
if btn.Value="Close" then btn.Value="Open"
end sub
</script>
你已经完成了，但是这会将名称更改为仅显示并且不会更改功能 onclick ，我对如何执行第二个进行了一些研究，似乎没有类似的东西
btn.onclick = ".."
但我想出了一个使用 标签的方法，它是这样的：
<script Language="VBScript">
Sub function1
MsgBox "function1"
span.InnerHTML= "<Input type=""button"" Value=""button2"" onclick=""function2"">"
End Sub
Sub function2
MsgBox "function2"
span.InnerHTML = "<Input type=""button"" Value=""button1"" onclick=""function1"">"
End Sub
</script>
<body>
<span id="span" name="span" >
<input type="button" Value="button1" onclick="function1">
</span>
</body>
自己试试吧，修改sub function1和sub function2中的代码，基本上jscript中你只需要知道这行就行了
span.InnerHTML = "..."
剩下的就是你要执行的代码
希望这会有所帮助：D
【讨论】：
你可以用 或 改变 .... 任何允许你在里面写代码的标签【参考方案13】：<input type="button" class="btn btn-default" value="click me changtext" id="myButton1" onClick="changetext()" >
<script>
function changetext()
var elem = document.getElementById("myButton1");
if (elem.value=="click me change text")
elem.value = "changed text here";
else
elem.value = "click me change text";
</script>
【讨论】：
【参考方案14】：This is simple way to change Submit to loading state
<button id="custSub" type="submit" class="button left tiny" data-text-swap="Processing.. ">Submit <i class="fa fa-angle-double-right"></i></button>
<script>
jQuery(document).ready(function ($)
$("button").on("click", function()
var el = $(this);
if (el.html() == el.data("text-swap"))
el.html(el.data("text-original"));
else
el.data("text-original", el.html());
el.html(el.data("text-swap"));
setTimeout(function ()
el.html(el.data("text-original"));
, 500);
);
);
</script>
【讨论】：
【参考方案15】：有很多方法。这在所有浏览器中也应该有效，并且您不必再使用 document.getElementById 因为您将元素本身传递给函数。
<input type="button" value="Open Curtain" onclick="return change(this);" />
<script type="text/javascript">
function change( el )
if ( el.value === "Open Curtain" )
el.value = "Close Curtain";
else
el.value = "Open Curtain";
</script>
【讨论】：
【参考方案16】：试试这个，
<input type="button" id="myButton1" value="Open Curtain" onClick="javascript:change(this);"></input>
<script>
function change(ref)
ref.value="Close Curtain";
</script>
【讨论】：
您不需要 javascript: 在 onClick 中 - 仅在 href="javascript:"【参考方案17】：似乎只是一个简单的拼写错误：
-
去掉change()后的分号，里面不应该有
函数声明。
在 myButton1 声明前添加引号。
更正的代码：
<input onclick="change()" type="button" value="Open Curtain" id="myButton1" />
...
function change()
document.getElementById("myButton1").value="Close Curtain";
更快、更简单的解决方案是在按钮中包含代码并使用关键字 this 来访问按钮。
<input onclick="this.value='Close Curtain'" type="button" value="Open Curtain" id="myButton1" />
【讨论】：
【参考方案18】：如果我正确理解了您的问题，您想在“打开窗帘”和“关闭窗帘”之间切换 - 如果关闭，则更改为“打开窗帘”，反之亦然。如果这是您需要的，这将起作用。
function change() // no ';' here
if (this.value=="Close Curtain") this.value = "Open Curtain";
else this.value = "Close Curtain";
请注意，您不需要在更改中使用 document.getElementById("myButton1")，因为它在 myButton1 的 context 中被调用——我的意思是您稍后会知道的上下文，关于阅读关于 JS 的书籍。
更新：
我错了。不像我之前说的，this 不会引用元素本身。你可以使用这个：
function change() // no ';' here
var elem = document.getElementById("myButton1");
if (elem.value=="Close Curtain") elem.value = "Open Curtain";
else elem.value = "Close Curtain";
【讨论】：
不使用“onClick”，Parth。您必须传递对对象的引用： onClick="change(this)" 然后在 JS 中： function change(button) print button.value; 哦，是的...正确。我认为它会起作用，但是当我看到你的评论时，我把它弄乱了，它失败了……我只是做一个编辑 @ParthThakkar on Chromethis 确实设置为按钮。
恐怖！我刚试了chrome，不行。它指的是 DOMWindow
在我自己遇到了一些问题（并意识到我只是有一个语法错误）之后，这就是我发现的工作：this.innerHTML =。在 Firefox v28 中使用 this.value 对我不起作用。这是一个实际的按钮元素，而不是输入按钮。【参考方案19】：
您在 id= 上缺少一个开头引号，并且函数声明后有一个分号。另外，输入标签不需要结束标签。
这行得通：
<input onclick="change()" type="button" value="Open Curtain" id="myButton1">
<script type="text/javascript">
function change()
document.getElementById("myButton1").value="Close Curtain";
</script>
【讨论】：
以上是关于更改按钮文本 onclick的主要内容，如果未能解决你的问题，请参考以下文章