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
You must log in or register to comment.
Thank you all, I really appreciate your advice. I’m currently doing the odin project and in the last section of the foundation course. I read a bunch of MDN docs of course as part of the course. I think I should read more of it
This is true of other dynamic languages. For example, Python will also allow you to add arbitrary properties to objects without complaining.
As others have mentioned, you need to read MDN, and more specifically, understand the browser APIs and DOM structure. When you have an HTMLElement, you should know that you need to set style properties on
.style, and you should know that.styleis a CSSStyleProperties object which uses camelCased version of the CSS property names, and each property takes a certain type of value, like the various value types for the width property, which include length values, percentage values and keyword values.One of the main skills of being a frontend developer is learning this object model. It doesn’t make sense to complain about it, because that is the job.
Trial and error is not an efficient way to learn. You should at the very least experiment in the browser with the dev tools open. Have a hypothesis for how something should work (like changing a particular property), try making the change and observe the effect on the webpage and in the dev tool inspector, and if your hypothesis is wrong, understand why and update your mental model. The goal is to avoid using trial and error eventually and build an understanding instead.
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
.tsconfigfile, and run a copy of the TypeScript compilertscto convert 'em all to JavaScript. That’ll eliminate entire classes of errors from your code, like your attempts to write to a non-existent.widthproperty, 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.
MDN is probably the best docs I’ve seen in my career. Even their translated version is impeccable.
In Javascript
widthshould not default topxconsidering you can also useem,pxand.This won’t help with your units issue but if you want Javascript to give more errors, try strict mode. Add:
;as the first line in your file.Js is a dynamic language. The first line is not “wrong”, it just isn’t what you want. It does indeed just add a new field in the gridContainer object. Tthis is perfectly valid javascript.
Js doesn’t “know” that it is running in a browser, nor does it care. It doesn’t know what the appropriate value or type is for these fields in a ‘div’ or anything else.
Yes, you pretty much have to use trial and error, unless there exists some other tool that can typecheck your code. I don’t do webdev, so I’m not sure.
