Javascript breaks when using values from HTML input field

Question

I'm trying to create a grid of a specific height/width given input. If I hard code in the height and width in the canvas below (10 and 5 in this case) it works perfectly

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();
})

This example breaks though:

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();
})

Any ideas what could be causing this? If I log height.value and width.value it is getting the values just fine, so I'm struggling to see how it's any different than being hardcoded if the values are being read in fine? The error I'm getting is:

canvas.js:18 Uncaught TypeError: Cannot set properties of undefined (setting '0') at Canvas.generateCanvas (canvas.js:18:33) at HTMLInputElement. (pixelcreator.js:8:12)

Here is code containing the line that the error references:

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();
        }
    }
}

Joe Lewis · Accepted Answer · 2022-03-15 07:17:09Z

1

height.value or width.value might be a string type.

Try this:

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

answered Mar 15, 2022 at 7:17

Joe Lewis

2,0002 gold badges19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CobaltGecko Over a year ago

Thank you, this was the solution, quick question though- why was it able to use the "width" value correctly? It actually made a row of the correct width, but not the correct height before I used parseInt like you suggested.

Joe Lewis Over a year ago

Interesting. I couldn't think of any possibilities how it behaved so. Did you happen to use <input type="number" ../> for width?

jkoch · Accepted Answer · 2022-03-15 07:18:52Z

1

You are using the value of the input directly which is a string. Try parsing it to an integer with parseInt(...)

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();
})

answered Mar 15, 2022 at 7:18

jkoch

8043 silver badges5 bronze badges

Collectives™ on Stack Overflow

Javascript breaks when using values from HTML input field

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related