One of the most and highly used DOM component is - "document".
In this example we are going to cover how to use the DOM object and we are going to disable/enable the HTML button and dropdown.
Let's write the sample HTML code which has the button and the dropdown element.
disableButton.html
Now that we are done with the sample HTML, let's write the JavaScript functions which will enable and disable the button and dropdown element.
test.js
In this example we are going to cover how to use the DOM object and we are going to disable/enable the HTML button and dropdown.
Let's write the sample HTML code which has the button and the dropdown element.
disableButton.html
<html> <head> <script src = "test.js"></script> </head> <body style="background-color:#F2F2F2;"> <button id="btn01">OK</button> <button onclick="disableElement()">Disable</button> <button onclick="enableElement()">Enable</button> <select id="mySelect"> <option>Java</option> <option>.Net</option> <option>PHP</option> <option>JavaScript</option> </select> <input type="button" onclick="disable()" value="Disable list" /> <input type="button" onclick="enable()" value="Enable list" /> </body> </html>
Now that we are done with the sample HTML, let's write the JavaScript functions which will enable and disable the button and dropdown element.
test.js
function disableElement() {
document.getElementById("btn01").value = "Disabled";
document.getElementById("btn01").disabled = true;
}
function enableElement() {
document.getElementById("btn01").value = "OK";
document.getElementById("btn01").disabled = false;
}
function disable() {
document.getElementById("mySelect").disabled = true;
}
function enable() {
document.getElementById("mySelect").disabled = false;
}
The browser will render the above code something like this.