The Input Button object represents an HTML <input> element with type="button".
You can access an <input> element with type="button" by using getElementById():
Example(1)
<input type="button" id="myBtn" onclick="myFunction()" value="Try it"> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("myBtn").value; document.getElementById("demo").innerHTML = x; } </script>
<button class="btn btn-success" onclick="create_new_button()">Try it</button> <script> function create_new_button() { var x = document.createElement("INPUT"); x.setAttribute("type", "button"); x.setAttribute("value", "Click me"); document.body.appendChild(x); } </script>
Property | Description |
---|---|
autofocus | Sets or returns whether an input button should automatically get focus when the page loads |
defaultValue | Sets or returns the default value of an input button |
disabled | Sets or returns whether an input button is disabled, or not |
form | Returns a reference to the form that contains the input button |
name | Sets or returns the value of the name attribute of an input button |
type | Returns which type of form element the input button is |
value | Sets or returns the value of the value attribute of an input button |
<!DOCTYPE html> <html> <head> <title>How To Use HTML DOM Input Button Object In JavaScript</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> </head> <style> .btn-info{ margin-left: 80px; } </style> <body> <div class="container"> <br> <br> <div class="text-center"> <h1>HTML DOM Input Button Object In JavaScript</h1> </div> <br> <div class="well"> <input class="btn btn-primary" type="button" id="Btn" onclick="extract()" value="Try it"> <h2 id="demo"></h2> <button class="btn btn-success" onclick="create_new_button()">Try it</button> </div> <div> </body> </html> <script> function extract() { var x = document.getElementById("Btn").value; document.getElementById("demo").innerHTML = x; } function create_new_button() { var x = document.createElement("INPUT"); x.setAttribute("type", "button"); x.setAttribute("class", "btn btn-info"); x.setAttribute("value", "Click me"); document.body.appendChild(x); } </script>