Javascript 更改按钮文本 onclick

Changing button text onclick

提问by Anthony Do

When I click on myButton1button, I want the value to change to Close Curtainfrom Open Curtain.
HTML:

当我单击myButton1按钮时，我希望值更改为Close Curtainfrom Open Curtain。
HTML：

<input onclick="change()" type="button" value="Open Curtain" id="myButton1"></input>

Javascript:

Javascript：

function change();
{
    document.getElementById("myButton1").value="Close Curtain";
}

The button is displaying open curtain right now and I want it to change to close curtain, is this correct?

按钮现在显示打开的窗帘，我希望它更改为关闭窗帘，这是正确的吗？

回答by Parth Thakkar

If I've understood your question correctly, you want to toggle between 'Open Curtain' and 'Close Curtain' -- changing to the 'open curtain' if it's closed or vice versa. If that's what you need this will work.

如果我正确理解了您的问题，您想在“打开窗帘”和“关闭窗帘”之间切换——如果关闭，则更改为“打开窗帘”，反之亦然。如果这就是您所需要的，这将起作用。

function change() // no ';' here
{
    if (this.value=="Close Curtain") this.value = "Open Curtain";
    else this.value = "Close Curtain";
}

Note that you don't need to use document.getElementById("myButton1")inside change as it is called in the contextof myButton1-- what I mean by context you'll come to know later, on reading books about JS.

请注意，您不需要使用document.getElementById("myButton1")内部更改，因为它是在上下文中调用的myButton1——我所说的上下文的意思是您稍后将在阅读有关 JS 的书籍时了解的内容。

UPDATE:

更新：

I was wrong. Not as I said earlier, thiswon't refer to the element itself. You can use this:

我错了。不像我之前说的，this不会引用元素本身。你可以使用这个：

function change() // no ';' here
{
    var elem = document.getElementById("myButton1");
    if (elem.value=="Close Curtain") elem.value = "Open Curtain";
    else elem.value = "Close Curtain";
}

回答by Baked Inhalf

When using the <button>element (or maybe others?) setting 'value' will not change the text, but innerHTMLwill.

使用<button>元素（或其他元素？）时，设置“值”不会更改文本，但innerHTML会更改。

var btn = document.getElementById("mybtn");
btn.value = 'my value'; // will just add a hidden value
btn.innerHTML = 'my text';

When printed to the console:

当打印到控制台时：

<button id="mybtn" class="btn btn-primary" onclick="confirm()" value="my value">my text</button>

<button id="mybtn" class="btn btn-primary" onclick="confirm()" value="my value">my text</button>

回答by Anders B

It seems like there is just a simple typo error:

似乎只有一个简单的错字错误：

1. Remove the semicolon after change(), there should not be any in the function declaration.
2. Add a quote in front of the myButton1 declaration.

1. 去掉change()后的分号，函数声明中不应该有分号。
2. 在 myButton1 声明前添加引号。

Corrected code:

更正的代码：

<input onclick="change()" type="button" value="Open Curtain" id="myButton1" />
...
function change()
{
    document.getElementById("myButton1").value="Close Curtain"; 
}

A faster and simpler solution would be to include the code in your button and use the keyword this to access the button.

更快更简单的解决方案是将代码包含在按钮中，并使用关键字 this 访问按钮。

<input onclick="this.value='Close Curtain'" type="button" value="Open Curtain" id="myButton1" />

回答by user1865775

There are lots of ways. And this should work too in all browsers and you don't have to use document.getElementById anymore since you're passing the element itself to the function.

有很多方法。这应该也适用于所有浏览器，并且您不必再使用 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>

回答by Krisi Suci

Add this function to the script

将此函数添加到脚本中

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";
                }

            }

and edit the button

并编辑按钮

<button onclick="myFunction()" id="myButton" value="Open Curtain">Open Curtain</button>

回答by P?lOliver

If you prefer binding your events outside the html-markup (in the javascript) you could do it like this:

如果您更喜欢在 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>

回答by SixPackScript

this can be done easily with a vbs code (as i'm not so familiar with js )

这可以使用 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>

and you're done , however this changes the Name to display only and does not change the function {onclick} , i did some researches on how to do the second one and seem there isnt' something like

你已经完成了，但是这将名称更改为仅显示而不更改函数 {onclick} ，我对如何执行第二个进行了一些研究，但似乎没有类似的东西

btn.onclick = ".."

but i figured out a way using <"span"> tag it goes like this :

但我想出了一种使用 <"span"> 标签的方法，它是这样的：

<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>

try it yourself , change the codes in sub function1 and sub function2, basically all you need to know to make it in jscript is the line

自己尝试一下，更改子函数1和子函数2中的代码，基本上你需要知道的就是在jscript中制作它的行

span.InnerHTML = "..." 

the rest is your code you wanna execute

剩下的就是你想要执行的代码

hope this helps :D

希望这有帮助：D

回答by saiyam

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;

回答by Sp4cecat

You are missing an opening quote on the id= and you have a semi-colon after the function declaration. Also, the input tag does not need a closing tag.

您在 id= 上缺少一个开始引号，并且在函数声明之后有一个分号。此外，输入标签不需要结束标签。

This works:

这有效：

<input onclick="change()" type="button" value="Open Curtain" id="myButton1">

<script type="text/javascript">
function change()
{
document.getElementById("myButton1").value="Close Curtain";
}
</script>

回答by premnathcs

Try this,

尝试这个，

<input type="button" id="myButton1" value="Open Curtain" onClick="javascript:change(this);"></input>
<script>
function change(ref) {
    ref.value="Close Curtain";
}
</script>