Setting a button's value using javascript

Solution 1:

Use innerHTML instead of value.

form.elements["submit-button"].innerHTML = ...

Because you are using a <button> instead of <input type="button">, you need to set the innerHTML. <button>s do not base their text on the value attribute.

<button> innerHTML </button>
<input type="button" value="value" />

Solution 2:

Your code works, but isn't doing what you probably expect. Your followed by shows the text of the button and it's initial value, however your code will change the value before the form is submitted. That means, the receiving page (most often a php/perl/asp script) will see the changed value passed as a GET or POST parameter.

If you want to change the text w/o submitting the form you might want to try this:

function changeValue(id, newText) {
    var el       = document.getElementById(id);
    el.value     = newText;  // change the value passed to the next page
    el.innerHTML = newText;  // change the displayed text on the screen
    return false;
}

<form onsubmit="return false;">
    <button  id="submit-button" 
           name="submit-button" 
        onclick="changeValue(this.id,'Some New Text');" >Original<br>Text</button>
</form>

see JS Fiddle here