JavaScript　独自オブジェクトのメソッドついて表が表示されません。

MUSUBINON

総合スコア11

1グッド

1クリップ

投稿2022/10/04 15:06

前提

Java Script で独自オブジェクトで表を作りたいのですが、表示されません。

実現したいこと

作成したコードで表が表示されるようにしたいです。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild') at createTable

該当のソースコード

ソースコード
``<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10日で覚えるJavaScript</title>
<style>
   table{border: solid 1px orange; border-spacing: 0px;}
   th,td{border: solid 1px orange; padding: 4px;}
</style>
<script>
    function Product(name, price){
        this.name = name;
        this.price = price;
        //コンストラクタ内でのメソッド作成
        this.calcPrice1 = function(amount){
            return this.price*amount;
        }
    }
    //prototypeを使用
    Product.prototype.calcPrice2 = function(amount){
        return this.price*amount;
    }
    var prod_data = [];
    prod_data.push( new Product('リラックスチェア', 4000) );
    prod_data.push( new Product('リラックスデスク', 12000) );
    prod_data.push( new Product('ブックスタンド', 800) );

    function TableTool(){}
    //静的メソッドを作成
    TableTool.createTdStr = function(values){
        var str='';
        for(var i=0; i<values.length; i++){
            str += '<td>' + values[i] + '</td>';
        }
        return str;
    }

    window.addEventListener('load',
      function(event){
        createTable();
      }
    ,false);
    //表作成
    function createTable(){
        var table = document.getElementById('prod_table');
        var tbody = document.getElementsByTagName('tbody')[0];
        for(var i=0; i<prod_data.length; i++){
            var tr = document.createElement('tr');
            tr.innerHTML = TableTool.createTdStr(
                [
                    prod_data[i].name, prod_data[i].price,
                    prod_data[i].calcPrice2(10),
                    prod_data[i].calcPrice2(20),
                    prod_data[i].calcPrice2(30)
                ]
            );
            tbody.appendChild(tr);
        }
    }
</script>
</head>
<body>
 <h1>新商品価格表</h1>
 <table id="prod_table">
    <thead>
        <tr><th>製品名</th><th>価格</th><th>10個</th></tr>
    </thead>
 </table>

</body>
</html>`

### 試したこと

何回も見直しはしました。

### 補足情報（FW/ツールのバージョンなど）

Visual Studio Code

行動規範の内容に同意します

回答1件

ベストアンサー

html側にtbodyがないので、追加したらいけました。

html
1<table id="prod_table">
2  <thead>
3    <tr>
4      <th>製品名</th>
5      <th>価格</th>
6      <th>10個</th>
7    </tr>
8  </thead>
9
10  <!-- 追加 -->
11  <tbody></tbody>
12</table>