2023 common mistakes sharing

[Guy_]

For 2023 - the idea of this topic is to collate common coding mistakes of any sort from willing members, in order to build a list of things to refer to when something isn't working as expected.

Please post any issues that you observe, however obscure or subtle or even misleading.

Simple example:

<svg class="background" >
<text id="myText" x="10%" y="10%" fill="white"> text</text>
</svg>

import document from "document";
let mytext = document.getElementById("mytext");  // incorrectly spelt - case sensitivity not respected
let myText = "";                                            //  mistake variable defined with same name as the SVG text ID
myText.text = "ABC";                                  //  incorrect variable assignment, but no error raised
console.log("App code started, myText is "+myText.text); //returns 'undefined', even though the assignment was made

[JohnnyRow]

I was afraid you were going to share over 2000 common mistakes, but now I understand. 😉

[kozm0naut]

Regarding your example @Guy_ I like to clarify assigned elements by prepending ele_ to the variable name, so in this case you'd have something like:

let ele_myText = document.getElementById("myText");
let myText = "ABC";
ele_myText.text = myText;

 For getElementsByClassName I like to use the prefix eles_ as a reminder that it will be an array of elements. Just a personal preference I thought I would share.

As for a common mistake that I run into, I will sometimes forget that for positional attributes of elements (x, y, width, height, cx, x1, etc.) you cannot dynamically assign percentage values in javascript (passing a string of e.g. "50%" will result in setting the actual value to 0 in js)

You can get around this by using the device screen properties:

import * as document from "document";
import {me as device} from "device";

let ele_myElement = document.getElementById("my-element");
ele_myElement.x = 0.5 * device.screen.width; //50% of screen width

[Guy_]

@kozm0naut- good tips, thanks for participating.

Interestingly it may not be possible to read the x value, unless it has been assigned in the code, in the case you need to shift it some pixels.