当我点击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";
}
当前按钮显示为“打开窗帘”，我想将其更改为“关闭窗帘”，这样正确吗？
function change() // no ';' here
{
if (this.value=="Close Curtain") this.value = "Open Curtain";
else this.value = "Close Curtain";
}
请注意，在change函数内部你不需要使用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";
}
在使用<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>
innerHTML会改变按钮的可见文本。value=""不可见，只存储隐藏数据。谢谢老兄。 - Micha看起来这只是一个简单的打字错误：
更正后的代码：
<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" />
有很多种方法。这种方法在所有浏览器中都可以使用，而且您不必再使用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>
var btn = document.getElementById("your_btn_id");
if(btn.innerText=="show"){
btn.innerText="hide";
}
else{
btn.innerText="show";
}
在我的情况下，使用value属性不起作用。
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>
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><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";
}
这对我很有帮助。我有多个按钮，我想切换输入值文本从“添加范围”到“删除范围”。
<input type="button" onclick="if(this.value=='Add Range') { this.value='Remove Range'; } else { this.value='Add Range'; }" />
您在id=上缺少一个开头引号，并且在函数声明后有一个分号。此外，输入标签不需要关闭标签。
这样可以正常工作：
<input onclick="change()" type="button" value="Open Curtain" id="myButton1">
<script type="text/javascript">
function change()
{
document.getElementById("myButton1").value="Close Curtain";
}
</script>
this.innerHTML =。但是在Firefox v28中，使用this.value对我没有用。这是针对实际按钮元素，而不是输入按钮。 - Chris Middleton