Javascript 函数在 jsp 页面中不起作用

Question

我想在我的 jsp 页面中使用 javascript 以便将输入框的值插入到表格行中。

我的 Jsp 页面：-

<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>

在这里，我想从输入框中将一行插入到表格中。 但是没有插入值。

代码有没有问题。

Answer 1

使用浏览器的控制台开发工具，查看错误，
这是错误：

未捕获的类型错误：document.getElementByTagName 不是 HTMLButtonElement.onclick (a.html:28) 的 addData (a.html:11) 中的函数

这意味着 javascript 无法识别此函数，因此您必须查看该函数的正确表示法

getElementsByTagName

Answer 2

错别字

试试这样， TagName是多重选择器。你缺少s

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

代替

 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>

Answer 3

请将拼写getElementByTagName更正为getElementsByTagName

Javascript 函数在 jsp 页面中不起作用

问题描述

3 个解决方案

解决方案1
1 2017-10-11 07:00:44

解决方案2
0 2017-10-11 06:56:49

解决方案3
0 2017-10-11 07:02:22

Javascript 函数在 jsp 页面中不起作用

问题描述

3 个解决方案

解决方案1 1 2017-10-11 07:00:44

解决方案2 0 2017-10-11 06:56:49

解决方案3 0 2017-10-11 07:02:22

解决方案1
1 2017-10-11 07:00:44

解决方案2
0 2017-10-11 06:56:49

解决方案3
0 2017-10-11 07:02:22