The document.getElementById() returns an Element object representing the element whose id property matches the specified string.
Following are example based on document.getElementById:
- Checkbox event demo
<!DOCTYPE html>
<html>
<head>
<style>
body{background-image: linear-gradient(to bottom, green, lightgreen);background-repeat: no-repeat; color:white; border-radius: 20px;"}
</style>
</head>
<body>
<h1 style="background-image: linear-gradient(to right, red, orange); color:white; border-radius: 20px;"> Chose your educational qualification</h1>
<form>
<input type="checkbox" name="edu" value="Degree">Under Graduate<br>
<input type="checkbox" name="edu" value="PostGraduate">Post Graduate <br>
<input type="checkbox" name="edu" value="Diploma">Diploma <br>
<br>
<input type="button" onclick="fun()" value="Show">
<input type="text" id="print" size="50">
</form>
<script>
function fun() {
var e = document.forms[0];
var txt = "";
var i;
for (i = 0; i < e.length; i++) {
if (e[i].checked) {
txt = txt + e[i].value + " ";
}
}
document.getElementById("print").value = "Your qualification: " + txt;
}
</script>
<p style="background-image: linear-gradient(to right, teal, white); color:black; text-align: justify;">
<b>Note: </b>The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly. </p>
</body>
</html>
Output of above code is:
2. Radio button event demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{background-image: linear-gradient(to bottom, green, lightgreen);background-repeat: no-repeat; color:white; border-radius: 20px;"}
</style>
<script type="text/javascript">
function r1() {
var x = document.getElementById("cash").checked;
document.getElementById("disp").innerHTML = "You selected :<b> Cash";
}
function r2() {
var y = document.getElementById("upi").checked;
document.getElementById("disp").innerHTML = "You selected : <b> UPI";
}
function r3() {
var y = document.getElementById("net").checked;
document.getElementById("disp").innerHTML = "You selected : <b> Net Banking";
}
</script>
</head>
<body>
<center>
<h1 style="background-image: linear-gradient(to right, red, orange); color:white; border-radius: 20px;"> Radio button with event </h1>
Mode of Payment:
<input type="radio" name="mop" id="cash" value="Cash" onclick="r1()">Cash
<input type="radio" name="mop" id="upi" value="UPI" onclick="r2()">UPI
<input type="radio" name="mop" id="net" value="Net Banking" onclick="r3()">Net Banking
<p id='disp'> </p>
<br><br>
<p style="background-image: linear-gradient(to right, green, lightgreen); color:white; border-radius: 20px;">MIT India </p>
<p style="background-image: linear-gradient(to right, gray, white); color:black; text-align: justify;">
<b>Note: </b>The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly. </p>
</body>
</html>
output of above code is:
3. Combo box event demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{background-image: linear-gradient(to right, green, lightgreen);border-radius: 20px;"}
</style>
<script type="text/javascript">
function fun() {
var x = document.getElementById("mop").value;
document.getElementById("disp").innerHTML ="Your mode of payment is <b><u>"+ x;
}
</script>
</script>
</head>
<body>
<center>
<h1 style="background-image: linear-gradient(to right, red, orange); color:white; border-radius: 20px;"> Combo with event </h1>
Mode of Payment:
<select id="mop">
<option value="Cash"> Cash </option>
<option value="UPI"> UPI </option>
<option value="Net Banking"> Net Banking </option>
</select>
<input type="button" name="b1" value="Check" onclick="fun()">
<p id='disp'> </p>
<br><br>
<p style="background-image: linear-gradient(to right, teal, lightgreen); color:white; border-radius: 20px;">MIT India </p>
<p style="background-image: linear-gradient(to right, white, green, white); color:black; text-align: justify;">
<b>Note: </b>The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly. </p>
</body>
</html>
output of above code is:
