How to Change the Button Value With Javascript

Change a button value using JavaScript.

JavaScript is an object-oriented programming language that provides developers access to client applications. The language is most commonly used to achieve dynamic or interactive functionality in web browsers, and is supported by Internet Explorer, Firefox, Safari, Opera and more. By bringing together two HTML elements and some simple JavaScript, you can change the value of a button in a web browser with a single click.

Instructions

1. Open your page and view its HTML code. If you use a visual web editing program, such as Adobe Dreamweaver or Microsoft Expression Web, open your page, click on the part of the page where you want to add the button, and then change your viewing mode to either Code View or Split View. If you use a plain text editor, simply open your page in the editor and scroll down until you reach the line of code where your button will be added.

2. Press "Enter" to create a blank line. Copy the sample code below and paste it onto the blank line to create a basic HTML button, along with two line breaks:

   <input type="button" value="Original button text" id="button"></input>
   <br /><br />

3. Press "Enter" again to create a blank line directly below the two line break tags you added in the previous step. Copy the sample code below and paste it onto the blank line:

   <a href="javascript:document.getElementById('button').value='New button text';void(0);">Change the button label</a>

4. Adjust the code parameters to suit your needs. Change the "Original button text" value within the <input> tag to adjust the default button label. Modify the "New button text" value contained in the JavaScript code within the <a> tag to adjust the new label that appears after the button is clicked. Finally, update the "Change the button label" value located between the opening and closing tags of the hyper link to modify the link label.

5. Save your web page to confirm your changes, and then open it in your browser. Click the hyper link located directly below the button to run the JavaScript command and change the button's default value.

References

• Permadi: Changing button text with JavaScript