Changing button text onclick

Solution 1:

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.

UPDATE:

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

Solution 2:

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

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>

Solution 3:

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.

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.

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