Display the Number of Buttons on an HTML Page

FOCUS

Our aim is to display the number of command buttons present on an HTML page, which must be done on click of a command button
named cmdNoOfButtons.

HTML code snippet

 
<div id="main" class="main">
  <p>Welcome to my web site</p>
  <p>We sell all the widgets you need.</p>
</div>
<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <input type="text" id="txtBox" name="txtBox" 
      value="This is Textbox" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" id="rdButton" name="chkButton" 
      value="This is Radio" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" id="chkButton" name="chkButton" 
      value="This is Checkbox" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="submit" id="cmdSubmit" name="cmdSubmit"
      value="This is a input box with type submit" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="reset" id="cmdReset" name="cmdReset" 
      value="This is a input box with type reset" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" id="cmdButton" name="cmdButton"
      value="This is a input box with type button" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" id="txtButton" name="cmdNoOfButtons"
      value=" This is a input box with type button" 
      onClick="displaynoofbuttons();" />
    </td>
  </tr>
</table>

Javascript code snippet

 
<script type="text/javascript">
  function displaynoofbuttons()
  {
    var counter= 0; //set counter equal to 0
    var noofelements = document.getElementsByTagName('input');
    //obtains a collection of HTML input objects
    //loop through HTML input object collection
    for(x in noofelements)
    {
      //if the input object type==button increment a counter
      if(noofelements[x].type=="button")
      {
        counter= counter+1; //increment counter by 1
      }
    }
  //Display the number of input type==button on an alert
  alert('There are ' + counter + ' input type="button" on the page');
  }
</script>

How the HTML codespec elements are counted and displayed:

When the command button whose id is cmdNoOfButtons is clicked a user defined Javascript method displaynoofbuttons(); is invoked.

 
var counter= 0;

In the function codespec, first create a memvar counter which is equal to 0.

 
var noofelements = document.getElementsByTagName('input');

The Javascript built in function getElementsByTagName(); is passed input as a value. This creates a collection of input elements (i.e. an array of input elements) in the HTML document.

Hence the memvar noofelements holds the handle to the collection of input elements in the HMTL document.

A simple for(); loop is used to step through the records of the input array and checks if the type=="button" for each input element on the HTML page.

NOTE: The HTML element input which can contain 10 different types. For example type="text", type="radio", type="submit", type="reset" and so on.

When the for() loop executed, the input element is checked for the type=="button", if found the variable counter is incremented by 1.

After all the input elements are thus processed an alert() is popped up that displays the number of HTML input elements whose type=="button".

The Complete Code

 
<html>
  <head>
    <title>Second HTML DOM Example</title>
    <script type="text/javascript">
    function displaynoofbuttons()
    {
    var counter= 0; //set counter equal to 0
    var noofelements = document.getElementsByTagName('input');
    //obtains a collection of HTML input objects
    //loop through HTML input object collection
    for(x in noofelements)
    {
      //if the input object type==button increment a counter
      if(noofelements[x].type=="button")
      {
        counter= counter+1; //increment counter by 1
      }
    }
    //Display the number of input type==button on an alert
    alert('There are ' + counter + ' input type="button" on the page');
    }
    </script>
  </head>
 
  <body id="mainbody">
  <div id="main" class="main">
  <p>Welcome to my web site</p>
  <p>We sell all the widgets you need.</p>
  </div>
  <table border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <input type="text" id="txtBox" name="txtBox" 
        value="This is Textbox" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="radio" id="rdButton" name=" chkButton" 
        value="This is Radio" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="chkButton" name=" chkButton" 
        value="This is Checkbox" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" id="cmdSubmit" name="cmdSubmit"
        value="This is a input box with type submit" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="reset" id="cmdReset" name="cmdReset"
        value="This is a input box with type reset" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" id="cmdButton" name="cmdButton"
        value="This is a input box with type button" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" id="txtButton" name="cmdNoOfButtons"
        value=" This is a input box with type button" 
        onClick="displaynoofbuttons();" />
      </td>
    </tr>
  </table>
  </body>
</html>