gridContainer.width = width * CELL_LENGTH; // 1
gridContainer.style.width = width * CELL_LENGTH; // 2
gridContainer.style.width = width * CELL_LENGTH + "px"; // 3

I just figured out that the code in cases 1 and 2 are wrong. The problem is js doesn’t complain about either of them. No errors in console. Nothing!

How should I know or figure out things like this?? When there’s no error and I don’t know why it doesn’t working other than trying different syntax until it works!

I used console and dev tools to figure it out as well but div.width seems to just adding another property to div that’s useless for browser. However for the second case, It just refuses to assign wrong syntax value to div.style.width without any complaint

  • JakenVeina@midwest.social
    7·
    3 days ago

    How should I know or figure out things like this?? When there’s no error and I don’t know why it doesn’t working other than trying different syntax until it works!

    A) MDN. Never use any JS API you’ve never used before without reading the docs on MDN first. JS is kind of a massive pain in the ass to work in, but dear lord, the MDN docs are just the absolute gold standard.

    B) Set yourself up with a rudimentary TypeScript build process. Not like a full managed project under npm or bun or whatever the latest fad is (unless you’ve already got a project setup like this, I guess). Just write your source files in TypeScript instead of JavaScript, setup a .tsconfig file, and run a copy of the TypeScript compiler tsc to convert 'em all to JavaScript. That’ll eliminate entire classes of errors from your code, like your attempts to write to a non-existent .width property, for example.

    If you’re not familiar with TypeScript, it’s built to be exclusively a superset of JavaScript. I.E. it’s just JavaScript with some type annotations. Really, the compiler is less of a compiler, and more of just a static analyzer that trims out the type annotations.

    C) You should probably also look for a JS/TS autocompletion tool, of some kind. I’m not sure what’s out there in that regard, except for Intellisense within Visual Studio, since VS is what we’re given at work. But for someone new to an API, having it be discoverable right in your editor is a DX that can’t be beat.