While calculating total of gridview cell using javascript and jquery getting error
<p>I am calculating the total of <code>GridView</code> cells using <em>java script</em> and <em>jquery</em>. But, I am always getting this error while compiling. </p>

<blockquote>
  <p>The name 'total' does not exist in the
  current context</p>
</blockquote>

<p>Inside <code>GridView</code> code:</p>

<pre><code>&lt;asp:TemplateField HeaderText="Header 1"&gt;
    &lt;ItemTemplate&gt;
        &lt;asp:TextBox ID="TextBox1" runat="server"&gt;&lt;/asp:TextBox&gt;
    &lt;/ItemTemplate&gt;            
    &lt;FooterTemplate&gt;
        &lt;asp:Label ID="lblTotal" runat="server" Text="Total" Font-Bold="true"&gt;
        &lt;/asp:Label&gt;
    &lt;/FooterTemplate&gt;            
&lt;/asp:TemplateField&gt;
&lt;asp:TemplateField HeaderText="Header 2" &gt;
    &lt;ItemTemplate&gt;
        &lt;asp:TextBox ID="TextBox2" runat="server" class="calculate" 
           onchange="calculate()"&gt;&lt;/asp:TextBox&gt;
    &lt;/ItemTemplate&gt;            
    &lt;FooterTemplate&gt;
        &lt;asp:TextBox ID="total" runat="server"&gt;&lt;/asp:TextBox&gt;
    &lt;/FooterTemplate&gt;  
</code></pre>

<p><em>javascript</em> and <em>jquery</em> code:</p>

<pre><code>&lt;script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" 
  type="text/javascript"&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
    function calculate()
     {
        var txtTotal = 0.00;
        //var passed = false;
        //var id = 0;

        $(".calculate").each(function (index, value) {
            var val = value.value;
            val = val.replace(",", ".");
            txtTotal = MathRound(parseFloat(txtTotal) + parseFloat(val));
        });
        document.getElementById("&lt;%=total.ClientID %&gt;").value = txtTotal.toFixed(2);
    }

    function MathRound(number) {
        return Math.round(number * 100) / 100;
    }

&lt;/script&gt;
</code></pre>

<p>how can I solve this issue any help pls.</p>
