更改按钮文本 onclick答案

【问题标题】：Changing button text onclick更改按钮文本 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";
}

按钮现在显示开窗帘，我想把它改成关窗帘，对吗？

【问题讨论】：

标签： javascript html button onclick

【解决方案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://stackoverflow.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.. &nbsp;">Submit &nbsp;<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 Chrome this 确实设置为按钮。
恐怖！我刚试了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>

【讨论】：