Javascript 使用來自 HTML 輸入字段的值時中斷

Question

我正在嘗試創建給定輸入的特定高度/寬度的網格。 如果我在下面的 canvas 中對高度和寬度進行硬編碼（在本例中為 10 和 5），它會完美運行

const canvasWindow = document.getElementById("canvas-window")
const height = document.getElementById("height")
const width = document.getElementById("width")
const generateCanvasBtn = document.getElementById("generate-canvas-btn")

generateCanvasBtn.addEventListener("click", () => {

    const canvas = new Canvas(document.getElementById("canvas-window"), 10, 5);
    canvas.generateCanvas();
})

這個例子打破了：

const canvasWindow = document.getElementById("canvas-window")
const height = document.getElementById("height")
const width = document.getElementById("width")
const generateCanvasBtn = document.getElementById("generate-canvas-btn")

generateCanvasBtn.addEventListener("click", () => {
    const canvas = new Canvas(document.getElementById("canvas-window"), height.value, width.value);
    canvas.generateCanvas();
})

任何想法可能是什么原因造成的？ 如果我記錄 height.value 和 width.value 它得到的值就很好，所以我正在努力看看它與硬編碼有什么不同，如果這些值被正常讀取的話？ 我得到的錯誤是：

canvas.js:18 未捕獲類型錯誤：無法在 Canvas.generateCanvas (canvas.js:18:33) 在 HTMLInputElement 處設置未定義的屬性（設置“0”）。 (pixelcreator.js:8:12)

這是包含錯誤引用的行的代碼：

class Canvas {

grid;

constructor(window, height, width) {
    this.window = window;
    this.height = height;
    this.width = width;
}

generateCanvas() {
    this.grid = new Array(this.height).fill(0).map(() => new Array(this.width).fill(0));
    for (let i = 0; i < this.height; i++) {
        const row = document.createElement("div");
        row.classList.add('row');
        this.window.appendChild(row);
        for (let j = 0; j < this.width; j++) {
            this.grid[i][j] = new Cell(row) // this is line 18 from the error
            this.grid[i][j].createCell();
        }
    }
}

Answer 1

height.value或width.value可能是字符串類型。

嘗試這個：

new Canvas(document.getElementById("canvas-window"), parseInt(height.value), parseInt(width.value));

Answer 2

您直接使用輸入的值，它是一個字符串。 嘗試使用 parseInt(...) 將其解析為 integer

const canvasWindow = document.getElementById("canvas-window")
const height = document.getElementById("height")
const width = document.getElementById("width")
const generateCanvasBtn = document.getElementById("generate-canvas-btn")

generateCanvasBtn.addEventListener("click", () => {
    const canvas = new Canvas(document.getElementById("canvas-window"), parseInt(height.value), parseInt(width.value));
    canvas.generateCanvas();
})