Javascript function not working in jsp page

Question

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.

Slimane amiar · Accepted Answer · 2017-10-11 07:10:43Z

1

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

edited Oct 11, 2017 at 7:10

answered Oct 11, 2017 at 7:00

Slimane amiar

1,05414 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nitesh Sharma · Accepted Answer · 2017-10-11 07:02:22Z

0

Please correct the spelling getElementByTagName to getElementsByTagName

answered Oct 11, 2017 at 7:02

Nitesh Sharma

5553 silver badges17 bronze badges

Comments

prasanth · Accepted Answer · 2017-10-11 07:03:33Z

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>

Collectives™ on Stack Overflow

Javascript function not working in jsp page

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related