我正在學習如何將 JavaScript 合并到 HTML 中，并嘗試基于類專案構建一個非常簡單的網路游戲。（這是一個側邊欄，我自己成功完成了專案。）
我需要兩個特定的影像來隨機填充整個表格。我的代碼成功地創建了適當長度的陣列并將其正確轉換為 HTML，但影像源似乎沒有正確填充。每個影像始終顯示一個影像，因此我確信我的源路徑是正確的，其中一個影像始終位于右下角，但該欄位的其余部分是空白的。在檢查 DevTools 時，該陣列具有適當的img屬性，但沒有源，除非顯然在img具有可見影像的 's 上。
class Field {
static generateField(h, w, pct = .2) {
let board = [];
let tempArray = [];
while (board.length < h) {
while (tempArray.length < w) {
const random = Math.random();
if (random < pct) {
tempArray.push(imageB);
} else {
tempArray.push(imageA);
}
}
board.push(tempArray);
}
for (let a = 0; a < h; a ) {
let row = document.createElement("tr");
for (let b = 0; b < w; b ) {
let cell = document.createElement("td");
let img = document.createElement("img");
img = board[a][b];
img.style.width = "100%";
img.style.height = "100%";
cell.appendChild(img);
row.appendChild(cell);
}
tblBody[0].appendChild(row);
}
}
}
是在tblBody之外定義的class。最初我的代碼是嵌套for回圈并給出了完全相同的結果。
我哪里錯了？
uj5u.com熱心網友回復：
我假設imageA并且imageB是影像檔案的路徑。如果是這樣，你的問題就在這里：
let img = document.createElement("img");
img = board[a][b];
您正在分配一個新創建的元素物件，img然后將一個字串（影像的路徑）重新分配給同一個變數。
相反，您必須為img您創建的元素添加一個源屬性，并將其值設定為影像的路徑：
let img = document.createElement("img");
img.setAttribute("src", "<path to imageB>");
然后，您可以將img元素及其src屬性附加到單元格。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/445449.html
標籤：javascript 图片 html表 填充