Using getElementById in Javascript

The document method getElementById is used to manipulate particular HTML elements on your page. As its name suggests, though, the HTML element needs an ID attached to it.

Example:

<html>

<head>

<script>

function addrow()

{

Document.getElementById(“mydiv”).innerHTML=”Enter City : <input type=’text’>”;

}

</script>

</head>

<body>

<input type=”button” value=”Add Location” onclick=”addrow()”>

<div id=”mydiv”>Output Here</div>

</body>

</html>

Hide /show Content on request

<html>

<head>

<script>

function myfn(q)

{

if(q==”cr”)

{

document.getElementById(“net_banking”).style.display=”none”;

document.getElementById(“credit_card”).style.display=”block”;

}

else

{

document.getElementById(“credit_card”).style.display=”none”;

document.getElementById(“net_banking”).style.display=”block”;

}

}

</script>

</head>

<body>

<div id=”credit_card”>

Card No. <input type=”text”>

<br>

Expiry Date : <input type=”date”>

<br>

<input type=”button” value=”Pay Now”>

</div>

<div id=”net_banking”>

Select Bank :

<select>

<option>IOB</option>

<option>OBC</option>

<option>PNB</option>

<option>SBI</option>

<option>Other</option>

</select>

<input type=”button” value=”Pay Now”>

</div>

<input type=”radio” value=”cr” onclick=”myfn(this.value)” name=”grp”>Credit

<input type=”radio” value=”net” onclick=”myfn(this.value)” name=”grp”>Net Banking

<script>

document.getElementById(“credit_card”).style.display=”none”;

document.getElementById(“net_banking”).style.display=”none”;

</script>

</body>

</html>

 

Enjoy the tutorial? Please spread the word :)

Follow by Email
Facebook
Facebook
Google+2k
Google+
http://hirdeshbhardwaj.com/2017/04/29/using-getelementbyid-javascript/
YouTube31
YouTube