Use getElementsByClassName return a list/array of elements. Pick element through index and set value on input element. You can also iterate over elements.
Use getElementById method if only one element needed to change value.
Example JavaScript set input value by class name
HTML example code :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<html> <body> <input class="in1" type="text" > <script> var els=document.getElementsByClassName("in1")[0]; els.value = "Test Content" </script> </body> </html> |
Output:
Another example
Loop over the array and set each element’s value. The getElementsByClassName() method returns a collection of an element’s child elements with the specified class name, as a NodeList object.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <body> <input class="in1" type="text" > <input class="in1" type="text" > <script> var els=document.getElementsByClassName("in1"); for (var i=0;i<els.length;i++) { els[i].value = "New values";} </script> </body> </html> |
Do comment if you have any suggestions or doubts on this topic.
Note: All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version
Degree in Computer Science and Engineer: App Developer and has multiple Programming languages experience. Enthusiasm for technology & like learning technical.