前提
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/10/05 00:39