CODEWITHSUNDEEP
javascriptjsp
Space
Space

Reputation: 213

Javascript function not working in jsp page

I want to use a javascript in my jsp page in order to insert value of the input box into a table row.

My Jsp Page:- 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        function addData(){
            var x = 1;
            var a = document.getElementById('area').value; 

            var table = document.getElementByTagName('table')[0];

            var row = table.insertRow(table.rows.length);

            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);

            cell1.innerHTML = x++;
            cell2.innerHTML = a;
        }
    </script> 

</head>

<body>
    <h2>Area...</h2>
    Area: <input type="text" id="area" name="area" required/><label>sq. ft.
    <button onclick="addData();">Add To Table</button>
    </br></br> 


        <div>
            <h2>Area Table...</h2>
            <table border="1">
                <tr>
                    <th>Section</th>
                    <th>Area</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>125.4485</td>
                </tr>
            </table>
        </div>
    </body>
</html>

Here i wanted to insert a row into a table from the input box. But the value is not being inserted.

Is there any problem in the code.

Upvotes: 2

Views: 4728

Answers (3)

Slimane amiar
Slimane amiar

Reputation: 1044

use the console developer tools of your browser, to see errors,
here is the error :

Uncaught TypeError: document.getElementByTagName is not a function at addData (a.html:11) at HTMLButtonElement.onclick (a.html:28)

which means javascript doesn't recognise this function , so you have to look , the right notation of the function which is

getElementsByTagName

Upvotes: 1

prasanth
prasanth

Reputation: 22490

Typo

Try like this, TagName is the multiple selector.you are missing s

var table = document.getElementsByTagName('table')[0];

instead of 

 var table = document.getElementByTagName('table')[0];


function addData() {
  var x = 1;
  var a = document.getElementById('area').value;

  var table = document.getElementsByTagName('table')[0];

  var row = table.insertRow(table.rows.length);

  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);

  cell1.innerHTML = x++;
  cell2.innerHTML = a;
}
<h2>Area...</h2>
Area: <input type="text" id="area" name="area" required/><label>sq. ft.
    <button onclick="addData();">Add To Table</button>
    </br></br> 


        <div>
            <h2>Area Table...</h2>
            <table border="1">
                <tr>
                    <th>Section</th>
                    <th>Area</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>125.4485</td>
                </tr>
            </table>
        </div>

Upvotes: 0

Nitesh Sharma
Nitesh Sharma

Reputation: 555

Please correct the spelling getElementByTagName to getElementsByTagName

Upvotes: 0

Related Questions