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>

 

author image

About admin

You Might Also Like...

Excel Sum Function
The While loop

Enjoy the tutorial? Please spread the word :)

Follow by Email
Facebook
Facebook
YouTube94
YouTube