更改按钮文本onclick

Question

当我单击此按钮时,我希望值更改.HTML:

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

使用Javascript:

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

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

Answer 1

如果我正确地理解了你的问题,你想在"打开帷幕"和"关闭帷幕"之间切换 - 如果它关闭则改为"打开帷幕",反之亦然.如果这就是你需要的,这将有效.

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

请注意,您不需要使用document.getElementById("myButton1")内部更改,因为它在上下文中调用myButton1- 我的意思是您稍后会在阅读有关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";
}

Answer 2

当使用<button>元素(或者其他？)时,设置'value'不会改变文本,但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>

Answer 3

似乎只有一个简单的拼写错误:

1. 在change()之后删除分号,函数声明中不应该有任何分号.
2. 在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" />

Answer 4

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

Answer 5

这段代码对我有用

  var btn = document.getElementById("your_btn_id");
    if(btn.innerText=="show"){
       btn.innerText="hide";
      }
    else{
      btn.innerText="show";
      }

在我的例子中使用价值是行不通的

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