Javascript – Changing button text onclick


When I click on myButton1 button, I want the value to change to Close Curtain from Open Curtain.

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


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?

Best Solution

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 context of myButton1 -- what I mean by context you'll come to know later, on reading books about JS.


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

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