私はテーブル、行、およびセルを作成するJavaScript関数drawGrid()を持っています。 関数内にappendChild(table)があれば、すべてがうまくいき、テーブルが表示されます。javascript DOM Element Objectを返す方法と、呼び出し元からappendChild(obj)を呼び出す方法はありますか?
しかし、私は、テーブルを返すとdrawGridを呼び出す関数(に添付をしたい)
ここdrawGridの終わり():私はdrawGrid(呼び出し
console.log(table instanceof HTMLElement) // true
console.log(table instanceof Node) // true
return table;
):
var table = new Grid()....
console.log(table instanceof HTMLElement) // false
console.log(table instanceof Node) // false
......appendChild(table);
Uncaught TypeError: 'Node'で 'appendChild'を実行できませんでした:パラメータ1のタイプが 'Node'ではありません。
テーブルを返すことで、ノードとHTMLElementのインスタンスであることを覚えているので、appendChild(テーブル)を作成できますか?どこか別の
function Grid(rows, cols, cellSize, line, thicker, xDivision, yDivision, gridColor, topMargin, opacity) {
Shape.apply(this, arguments);
this.rows = rows;
this.cols = cols;
this.cellSize = cellSize;
this.line = line;
this.thicker = thicker;
this.xDivision = xDivision;
this.xAccent = rows/xDivision;
this.yDivision = yDivision;
this.yAccent = cols/yDivision;
this.topMargin = topMargin;
this.opacity = opacity;
this.gridColor = gridColor;
this.drawGrid(this.rows, this.cols, this.cellSize, this.line, this.thicker, this.xAccent, this.yAccent, this.gridColor, this.topMargin, this.opacity);
};
Grid.prototype = Object.create(Shape.prototype);
Grid.prototype.constructor = Grid;
Grid.prototype = {
drawGrid: function(rows, cols, cellSize, line, thicker, xAccent, yAccent, gridColor, topMargin, opacity) {
var table = document.createElement("TABLE");
table.setAttribute("id", "hundred_square");
table.style.cssText +=';'+ "width: "+ (cols*cellSize) +"vw; height: "+ (rows*cellSize) +"vw; border-collapse: collapse; border: "+ (5*line) +"vw solid" +gridColor+ "; margin: " +topMargin+ "vw auto;";
for(var i=0; i < rows; i++){
var row = document.createElement("TR");
table.appendChild(row);
row.style.cssText += ';' + "opacity: "+ opacity +"; filter: alpha(opacity="+ (opacity*100) +");";
for(var j=0; j < cols; j++){
var cell = document.createElement("TD");
row.appendChild(cell);
cell.style.cssText += ';' + "width: "+ cellSize +"vw; height: "+ cellSize +"vw; border-right: "+ (j%yAccent==(yAccent-1) ? thicker*line : line) +"vw solid " +gridColor+ "; border-bottom: "+ (i%xAccent==(xAccent-1) ? thicker*line : line) +"vw solid " +gridColor+ ";opacity: 0."+ opacity +"; filter: alpha(opacity="+ (opacity*100) +");";
}
}
//document.getElementById("js_animation").appendChild(table);
console.log(table instanceof HTMLElement) //true
console.log(table instanceof Node) //true
return table;
}
};
と::全体のコードの下
var table = new sl.Shapes.Grid(10, 10, 3.5, 0.1, 5, 2, 2, "#bfbf8c", 4.5, 0.85);
console.log(table instanceof sl.Shapes.Grid) // true
console.log(table instanceof HTMLElement) // false
console.log(table instanceof Node) // false
document.getElementById("js_animation").appendChild(table);
エラー
マラートありがとうございます。あなたは正しい方向に私を指していましたが、あなたの答えが望ましい結果を生むことはありません。 drawGrid()関数をコンストラクタから削除する必要がありました。すべての引数は不要ですが、重要な変更はdrawGrid定義のプロトタイプバージョン(colsではなくthis.cols)で置き換えることでした。今度は、var table = new Grid(..)とappendChild(table.drawGrid())のようにテーブルを返すことができます。ありがとう! – Daniela