When I click on myButton1
button, I want the value to change to Close Curtain
from Open Curtain
.
HTML:
JavaScript
x
2
1
<input onclick="change()" type="button" value="Open Curtain" id="myButton1"></input>
2
Javascript:
JavaScript
1
5
1
function change();
2
{
3
document.getElementById("myButton1").value="Close Curtain";
4
}
5
The button is displaying open curtain right now and I want it to change to close curtain, is this correct?
Advertisement
Answer
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.
JavaScript
1
6
1
function change() // no ';' here
2
{
3
if (this.value=="Close Curtain") this.value = "Open Curtain";
4
else this.value = "Close Curtain";
5
}
6
Note that you don’t need to use document.getElementById("myButton1")
inside change as it is called in the context of myButton1
— what I mean by context you’ll come to know later, on reading books about JS.
UPDATE:
I was wrong. Not as I said earlier, this
won’t refer to the element itself. You can use this:
JavaScript
1
7
1
function change() // no ';' here
2
{
3
var elem = document.getElementById("myButton1");
4
if (elem.value=="Close Curtain") elem.value = "Open Curtain";
5
else elem.value = "Close Curtain";
6
}
7