HTML DOM Input Button Object
The DOM Input Type Button Object is used to represent the HTML <input> element with type=”button”. The Input Type Button element is accessed by getElementById().
Syntax:
document.getElementById("ID");
Where “id” is the ID assigned to the “input” tag.
Example 1: In this example, we will see the use of the DOM Input Button Object
HTML
<!DOCTYPE html> < html > < head > < style > h1 { color: green; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 > DOM Input Button Object </ h2 > <!-- Assigning button id --> < input type = "button" id = "GFG" onclick = "myBeginner()" value = "Submit" > < p id = "sudo" ></ p > < script > function myBeginner() { // accessing 'button' id. let g = document.getElementById("GFG").value; document.getElementById("sudo").innerHTML = "Value od input type button is:" + g; } </ script > </ body > </ html > |
Output:
Example 2: Input button Object can be created by using the document.createElement method.
HTML
<!DOCTYPE html> < html > < head > < style > h1 { color: green; } #GFG { margin-left: 45%; margin-top: 30px; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 > DOM Input Button Object </ h2 > < h3 style = "color:green;" > Click the Button to Create the Button</ h3 > < button onclick = "myBeginner()" >Submit</ button > < script > function myBeginner() { let g = document.createElement("INPUT"); g.setAttribute("type", "button"); g.setAttribute("value", "Click me"); g.setAttribute("id", "GFG"); document.body.appendChild(g); } </ script > </ body > </ html > |
Output:
Supported Browsers: The browser supported by DOM Input button Object are listed below:
- Google Chrome 1 and above
- Firefox 1 and above
- Opera
- Safari 1 and above
- Edge 12 and above
Contact Us