2017-10-11 16 views
1

入力ボックスの値をテーブル行に挿入するために、jspページでjavascriptを使用したいとします。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> 

私は、入力ボックスからテーブルに行を挿入したかったです。しかし値は挿入されていません。

コードに問題はありますか?

答えて

0

誤植

TagNameは、複数のselector.youが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>
が欠落しているで、次のように試してみてくださいあなたは、右を見ているので、

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

この機能を認識しませんジャバスクリプトを意味します

1

10は
ここ がエラーで、エラーを確認するために、お使いのブラウザのコンソール開発ツールを使用します

getElementsByTagName

0

ある機能の表記に綴りgetElementByTagNameを修正してください

関連する問題