Javascript

Tuesday, December 9, 2014

Count characters in textfield on keydown event

Monday, January 13, 2014

Example of innerText.

<html>
<body>
<script type="text/javascript" >
function validate()
{
var msg;
if(document.myForm.userPass.value.length>5)
{
msg="good";
}
else
{
msg="poor";
}
document.getElementById('mylocation').innerText=msg;
}
</script>

<form name="myForm">

<input type="password" value="" name="userPass" onkeyup="validate()">
Strength:<span id="mylocation">no strength</span>

</form>
</body>
</html>

innerHTML example.

<html>
<body>
<script type="text/javascript" >
function commentForm()
{
var data="Name:<input type='text' name='name'><br>Comment:<textarea rows='5' cols='50'></textarea><br><input type='submit' value='comment'>";

document.getElementById('place').innerHTML=data;
}
</script>
<form name="myForm">
<input type="button" value="comment" onclick="commentForm()">
<div id="place"></div>
</form>
</body>
</html>

Another Example of getElementByTagName() method.

<html>
<body>
<script type="text/javascript">
function counth2()
{
var totalh2=document.getElementsByTagName("h2");
alert("total h2 tags are: "+totalh2.length);
}
function counth3()
{
var totalh3=document.getElementsByTagName("h3");
alert("total h3 tags are: "+totalh3.length);
}
</script>
<h2>This is h2 tag</h2>
<h2>This is h2 tag</h2>
<h3>This is h3 tag</h3>
<h3>This is h3 tag</h3>
<h3>This is h3 tag</h3>
<button onclick="counth2()">count h2</button>
<button onclick="counth3()">count h3</button>
</body>
</html>`

getElementByTagName() method example :-

The getElementByTagName() method returns all the element.

<html>
<body>
<script type="text/javascript">
function mahi()
{
var prgf=document.getElementsByTagName("p");
alert("total p tags are: "+prgf.length);
}
</script>

<p>This is a pragraph</p>
<p>Here we are going to count total number of paragraphs by getElementByTagName() method.</p>
<p>Here is the simple example.</p>
<p>I am Mahi Babariya.</p>
<p>I Love My parents alot</p>

<button onclick="mahi()">Count Paragraph</button>
</body>
</html>

document.getElementByName() method example.

The document.getElementByName() method returns all the element of specified name.

<html>
<body>
<script type="text/javascript">
function mahi()
{
var allgenders=document.getElementsByName("gender");
alert("Total Genders:"+allgenders.length);
}
</script>
<form>
Male:<input type="radio" name="gender" value="male">
Female:<input type="radio" name="gender" value="female">
<input type="button" onclick="mahi()" value="Total Genders">
</form>
</body>
</html>

document.getElementById() method example.

<html>
<body>
<script type="text/javascript">
function getcube()
{
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
<form>
Enter No:
<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>
</body>
</html>

Here, the document.getElementById() method returns the element of specified id.