html - Setting a button's value using javascript

Question

I'm sure I'm going to feel stupid after seeing the answer, but I keep running into prehistoric code around the web, which I'm not sure still applies. My question is "How do I change the value of a button (inside a form) using javascript?" Here's what I have right now:

function myFunc(form) {
    form.elements["submit-button"].value = "New<br>Text";
    "other stuff that actually works."
    return false;
}

followed by

<form onSubmit="return myFunc(this);">
    <button name="submit-button">Original<br>Text</button>
</form>

The "other stuff that actually works." actually works, so I'm sure the function is getting called and the button is getting found. I just can't seem to stick "New
Text" into the button!

Help much appreciated.

Answer 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" />