getelementbyid Archives - https://mitindia.in/tag/getelementbyid/ Sat, 07 Jan 2023 07:48:30 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://mitindia.in/wp-content/uploads/2023/03/cropped-android-chrome-512x512-1-32x32.png getelementbyid Archives - https://mitindia.in/tag/getelementbyid/ 32 32 java script events https://mitindia.in/java-script-events/ Sat, 07 Jan 2023 07:48:30 +0000 https://www.mitindia.in/?p=1299 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> […]

The post java script events appeared first on .

]]> The document.getElementById() returns an Element object representing the element whose id property matches the specified string.

Following are example based on document.getElementById:

  1. 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:

Share

The post java script events appeared first on .

]]>