JavaScript DOM Events & Manipulation: Interactive Web Development

🚀 JavaScript Event Loop in Action — Why setTimeout(0) Doesn't Run Immediately I recently experimented with a small JavaScript snippet to understand how blocking code interacts with timers and the event loop. Here is the code: console.log("Script start"); // Timer with 0ms setTimeout(() => { console.log("0ms timer executed"); }, 0); // Timer with 100ms setTimeout(() => { console.log("100ms timer executed"); }, 100); // Timer with 500ms setTimeout(() => { console.log("500ms timer executed"); }, 500); console.log("Starting heavy computation..."); // Blocking loop for (let i = 0; i < 100000000; i++) {} console.log("Heavy computation finished"); console.log("Script end"); 🔎 What we might expect Many developers assume that setTimeout(..., 0) will execute immediately. But that’s not how JavaScript works. ⚙️ Actual Execution Process 1️⃣ Script starts The synchronous code begins executing on the Call Stack. Script start 2️⃣ Timers are registered The setTimeout functions are handed over to the Web APIs environment. They start counting their timers in the background. 0ms timer 100ms timer 500ms timer But none of their callbacks execute yet. 3️⃣ Heavy synchronous computation starts The large for loop runs on the main thread and blocks it. Starting heavy computation... During this time: JavaScript cannot process any other tasks The call stack remains busy Even if timers expire, their callbacks must wait 4️⃣ Timers expire while the loop is running While the loop is still executing: 0ms timer expires 100ms timer expires Possibly even the 500ms timer But they cannot run yet because the call stack is still occupied. 5️⃣ Loop finishes Heavy computation finished Script end Now the Call Stack becomes empty. 6️⃣ Event Loop starts processing queued callbacks The Event Loop checks the Callback Queue and begins executing timers in order. 0ms timer executed 100ms timer executed 500ms timer executed 🧠 Key Takeaways ✔ JavaScript is single-threaded ✔ Long synchronous tasks block the event loop ✔ setTimeout(0) does not run immediately ✔ Timers only execute after the call stack is empty Understanding this behavior is essential for writing efficient asynchronous JavaScript and avoiding performance issues caused by blocking code. Next on my learning journey: exploring microtasks vs macrotasks and how Promises interact with the event loop. Sarthak Sharma Devendra Dhote #JavaScript #WebDevelopment #EventLoop #AsyncProgramming #FrontendDevelopment

🚀 Understanding Hoisting and Temporal Dead Zone in JavaScript 1️⃣ Hoisting in JavaScript ("var") Hoisting means JavaScript moves variable declarations to the top of their scope during the compilation phase. When a variable is declared with "var", it is hoisted and initialized with "undefined". That is why we can sometimes access it before its declaration without getting an error. Example console.log(name); // undefined var name = "John"; Behind the scenes, JavaScript interprets it like this: var name; console.log(name); // undefined name = "John"; So with "var", the variable exists before the line where it is declared, but its value is undefined. --- 2️⃣ Temporal Dead Zone (TDZ) with "let" and "const" "let" and "const" are also hoisted, but they behave differently. They stay in a special state called the Temporal Dead Zone from the start of the scope until the line where they are declared. During this period, the variable cannot be accessed. Example console.log(age); // ReferenceError let age = 25; Here, JavaScript knows that "age" exists, but it does not allow access to it before the declaration line. This period is called the Temporal Dead Zone. --- 3️⃣ Example with "const" "const" works the same way as "let" regarding TDZ. console.log(pi); // ReferenceError const pi = 3.14; Until the declaration line is reached, "pi" remains in the Temporal Dead Zone. --- 4️⃣ Why "var" Does Not Have TDZ "var" does not have a Temporal Dead Zone because it is automatically initialized with "undefined" when hoisted. Example: console.log(score); // undefined var score = 100; Instead of throwing an error, JavaScript simply returns "undefined". --- 5️⃣ Key Difference 🔹 "var" - Hoisted to the top of scope - Automatically initialized with "undefined" - No Temporal Dead Zone 🔹 "let" and "const" - Also hoisted - Not initialized immediately - Stay in Temporal Dead Zone until declaration line - Accessing them early throws ReferenceError --- ✅ Final Takeaway - Hoisting mainly explains the behavior of "var". - Temporal Dead Zone (TDZ) explains the behavior of "let" and "const". - TDZ exists to prevent accessing variables before they are properly declared, making code safer and less error-prone. 💡 Understanding these concepts helps you avoid common JavaScript bugs and write more predictable code. #JavaScript #WebDevelopment #BackendDevelopment #Programming #LearnToCode

🤔 Ever seen code like const { name: fullName } = user or const [first, ...rest] = arr and thought: “Okay... I kind of know what it does, but why is this so common?” That is destructuring and aliasing in JavaScript. 🧠 JavaScript interview question What is destructuring / aliasing in JavaScript, and how is it useful? ✅ Short answer Destructuring lets you extract values from arrays or objects into variables in a shorter, cleaner way. Aliasing means renaming a destructured property while extracting it. That helps you: write less repetitive code set default values pull only what you need avoid variable name conflicts make function parameters easier to read 🔍 Array destructuring With arrays, destructuring is based on position: const rgb = [255, 200, 100]; const [red, green, blue] = rgb; You can skip items or provide defaults: const coords = [10]; const [x = 0, y = 0, z = 0] = coords; // x = 10, y = 0, z = 0 And you can collect the rest: const numbers = [1, 2, 3, 4, 5]; const [first, ...rest] = numbers; // first = 1, rest = [2, 3, 4, 5] 📦 Object destructuring With objects, destructuring is based on property names, not position: const user = { id: 123, name: "Alice", age: 25 }; const { id, name } = user; You can also set fallback values: const { nickname = "Anon" } = user; 🏷️ What aliasing means Aliasing is just renaming during destructuring: const person = { firstName: "Bob", "last-name": "Smith" }; const { firstName: first, "last-name": last } = person; // first = "Bob", last = "Smith" This is useful when: you already have a variable with the same name the original property name is unclear the property name is not convenient to use directly 🧩 Destructuring in function parameters A very common real-world pattern: function printUser({ name: fullName, age }) { console.log(`${fullName} is ${age} years old.`); } Instead of writing user.name and user.age inside the function, you extract what you need immediately. That makes the function signature more self-explanatory. 🌳 Nested destructuring Destructuring can also go deeper into nested data: const data = { user: { id: 42, preferences: { theme: "dark", languages: ["en", "es", "fr"], }, }, }; const { user: { id: userId, preferences: { theme, languages: [primaryLang, ...otherLangs], }, }, } = data; ⚠️ Common thing people mix up Destructuring extracts values. It does not clone deeply. So if the extracted value is an object or array, you are still dealing with references. 💡 Why it is useful in real projects Cleaner code with less repetition Better defaults when data is missing Easier-to-read function parameters Safer naming with aliasing Very handy when working with API responses, props, and config objects That is why destructuring shows up everywhere in React, Node.js, and modern JavaScript codebases. #javascript #webdevelopment #frontend #reactjs #typescript

🚨 JavaScript Objects Confused Me… Until I Understood This One Thing When I started learning JavaScript, I thought objects were simple. Then I saw terms like object literals, constructor functions, "this", prototypes, "Object.create()"… And suddenly my brain went: "Wait… what is actually happening here?" 🤯 But once the puzzle clicked, everything started making sense. Here’s the simplest way I now understand JavaScript objects 👇 --- 🔹 1️⃣ Object Literals — The simplest way to create objects const user = { name: "Alex", age: 25 }; Clean. Simple. And used most of the time. --- 🔹 2️⃣ Constructor Functions — Blueprint for multiple objects function User(name, age) { this.name = name; this.age = age; } const u1 = new User("Alex", 25); Here, "this" refers to the new object being created. Think of it like a template for creating many similar objects 🧩 --- 🔹 3️⃣ Prototypes — JavaScript’s hidden superpower Instead of copying methods into every object, JavaScript shares them through prototypes. User.prototype.greet = function() { console.log("Hello!"); }; Now every "User" object can access "greet()" without duplicating memory 🚀 --- 🔹 4️⃣ Object.create() — Direct control over prototypes const person = { greet() { console.log("Hi!"); } }; const user = Object.create(person); This creates an object that inherits directly from another object. Simple concept. Very powerful in practice. --- 🔹 5️⃣ The "let" & "const" confusion with arrays and objects This confused me for a long time 👇 const arr = [1,2,3]; arr.push(4); // ✅ Works But this fails: const arr = [1,2,3]; arr = [4,5,6]; // ❌ Error Why? Because "const" protects the reference, not the content. Objects and arrays are reference types, so their internal values can change. But primitive values cannot: const a = 10; a = 20; // ❌ Error --- 🔥 Once you understand this: • Objects store references • Prototypes enable shared behavior • "this" depends on how a function is called JavaScript suddenly becomes much easier to reason about. And honestly… much more fun to work with. 🚀 --- 💬 If you're learning JavaScript: What concept confused you the most at first? Let’s help each other grow 👇 --- #javascript #webdevelopment #frontenddevelopment #softwaredevelopment #coding #programming #developer #100daysofcode #learnjavascript #codinglife #techlearning

🔥 JavaScript Deep Dive: Understanding this, call(), apply(), and bind() One of the most important concepts in JavaScript is understanding how function context works. Many developers get confused with the behavior of the this keyword and how it changes depending on how a function is called. To control the value of this, JavaScript provides three powerful methods: call(), apply(), and bind(). Understanding these concepts is essential for writing clean, reusable, and predictable JavaScript code, especially when working with callbacks, event handlers, and modern frameworks. 📌 1️⃣ this Keyword In JavaScript, this refers to the object that is executing the current function. const user = { name: "Developer", greet() { console.log(`Hello ${this.name}`) } } user.greet() Output Hello Developer Here, this refers to the user object because the method is called using user.greet(). ⚡ 2️⃣ call() – Execute a function with a specific context The call() method invokes a function immediately and allows us to set the value of this. function greet(){ console.log(`Hello ${this.name}`) } const user = { name: "Developer" } greet.call(user) We can also pass arguments: function greet(city){ console.log(`${this.name} from ${city}`) } const user = { name: "Developer" } greet.call(user, "Meerut") ⚡ 3️⃣ apply() – Similar to call but arguments are passed as an array function greet(city, country){ console.log(`${this.name} from ${city}, ${country}`) } const user = { name: "Developer" } greet.apply(user, ["Meerut", "India"]) ⚡ 4️⃣ bind() – Creates a new function with a fixed this Unlike call() and apply(), the bind() method does not execute the function immediately. Instead, it returns a new function with the specified this value. function greet(){ console.log(`Hello ${this.name}`) } const user = { name: "Developer" } const greetUser = greet.bind(user) greetUser() 💡 Understanding the difference • call() executes the function immediately and arguments are passed normally (comma separated). • apply() also executes the function immediately, but arguments are passed as an array. • bind() does not execute the function immediately. Instead, it returns a new function with the this value permanently bound, which can be executed later. ⚡ Why this concept matters Understanding function context is crucial for: • Reusing functions across objects • Controlling behavior of callbacks • Writing modular and maintainable code • Working effectively with event handlers and asynchronous code Mastering these JavaScript fundamentals helps developers build more predictable and scalable applications. #JavaScript #WebDevelopment #Programming #FrontendDevelopment #Coding #SoftwareDevelopment #DeveloperJourney

**🚀 I built a JavaScript Execution Visualizer — because understanding the Event Loop shouldn't require a PhD.** After spending way too long confused by async JavaScript, I decided to build a tool that makes it *visual*. **JS Visualizer** lets you paste any JavaScript code and watch it execute — step by step — with real-time animations showing exactly what's happening under the hood. **What it visualizes:** - 📦 **Call Stack** — watch execution contexts push and pop in real time - ⏱ **Web APIs** — see `setTimeout` and `fetch` handed off to the browser - ⚡ **Microtask Queue** — Promise callbacks, queued with priority - 🔄 **Task Queue** — macro tasks waiting their turn - ♾ **Event Loop** — animated ring showing which queue is being processed **The classic event loop puzzle — solved visually:** ``` console.log('1: Start');     // runs first setTimeout(callback, 0);     // goes to Web APIs → Task Queue Promise.resolve().then(fn);   // goes to Microtask Queue console.log('2: End');      // runs before both callbacks // Output order: 1 → 2 → Promise .then → setTimeout ``` Most developers *know* microtasks run before tasks — but watching it happen live makes it click in a completely different way. **Tech stack:** - Vanilla HTML / CSS / JavaScript (no frameworks needed) - [Acorn.js](https://lnkd.in/g7f4aC5Y) for AST parsing — the actual JS code you paste gets parsed into an AST and walked node-by-node - CodeMirror 5 for the editor with live line highlighting - 100% dark mode, production-quality design **Supports:** ✅ Synchronous function call stacks with closure variables ✅ `setTimeout` / `setInterval` → Web APIs → Task Queue ✅ `Promise.resolve().then()` → Microtask Queue ✅ `new Promise(executor)` with `resolve` / `reject` ✅ `queueMicrotask`, `fetch` ✅ `if/else`, `for`, `while`, `try/catch` ✅ Keyboard navigation (← →) This was a genuinely hard problem — building a safe AST-walking interpreter that accurately models the JavaScript event loop from scratch, without executing the code directly. If you're learning JavaScript async, teaching it, or just want to see the event loop in action — give it a try. https://lnkd.in/gWfdaUWM 💬 What JavaScript concept do you wish you had a visual tool for when you were learning? Drop it in the comments 👇 --- #JavaScript #WebDevelopment #EventLoop #AsyncJS #Programming #OpenSource #FrontendDevelopment #LearnToCode #DevTools #Coding

🚀 JavaScript Event Loop “JavaScript is single-threaded…” 🧵 👉 Then how does it handle timers, API calls, promises, and user interactions so smoothly?  What is the Event Loop? 👉 The Event Loop is a mechanism that continuously checks the call stack and task queues, and executes code in the correct order without blocking the main thread. 👉 It ensures JavaScript remains non-blocking and efficient. To Understand Event Loop, You Need 5 Core Pieces: 1️⃣ Call Stack 📚 The Call Stack is a data structure that keeps track of function execution in JavaScript. It follows the Last In, First Out (LIFO) principle. ⚙️ How It Works: >> When a function is called → it is pushed onto the stack >> When the function completes → it is popped off the stack >> The stack always runs one function at a time Example: function greet() { console.log("Hello"); } greet(); 👉 Goes into stack → executes → removed 2️⃣ Web APIs 🌐 👉 Provided by the browser (not JavaScript itself) Handles async operations like: setTimeout, fetch, DOM events.... 3️⃣ Callback Queue (Macrotask Queue) 📥: The Callback Queue (also called Task Queue) is a place where callback functions wait after completing asynchronous operations, until the Call Stack is ready to execute them. ⚙️ How It Works: >> Async function (like setTimeout) runs in background >> After completion → its callback goes to Callback Queue Event Loop checks: > If Call Stack is empty → moves callback to stack > If not → waits 👉 Any callback from async operations like timers, events, or I/O goes into the Callback Queue (except Promises, which go to Microtask Queue). 4️⃣ Microtask Queue ⚡: The Microtask Queue is a special queue in JavaScript that stores high-priority callbacks, which are executed before the Callback Queue. ⚙️How It Works: Execute all synchronous code (Call Stack) Check Microtask Queue Execute ALL microtasks Then move to Callback Queue 5️⃣ Event Loop 🔁 👉 Keeps checking: 👉 “Is the call stack empty?” If YES: >> Execute all microtasks >> Then execute macrotasks Example: console.log("Start"); setTimeout(() => {  console.log("Timeout"); }, 0); Promise.resolve().then(() => {  console.log("Promise"); }); console.log("End"); Output: Start End Promise Timeout 🚀 Key Takeaways: >> JS executes synchronous code first >> Then Microtasks (Promises) completely >> Then Callback Queue (setTimeout, events) >> Event Loop keeps checking and moving tasks #JavaScript #EventLoop #AsyncJavaScript #WebDevelopment #Frontend #Coding #Developers #Programming #LearnJavaScript #100DaysOfCode

NodeList vs HTMLcollection While working with the DOM in JavaScript, you might have noticed something interesting in the browser console. You may encounter them when using methods like: • querySelectorAll() • getElementsByClassName() • getElementsByTagName() But what do these actually mean? And why is it useful to understand them? Both NodeList and HTMLCollection are array-like collections returned by the DOM API. They represent groups of nodes or elements selected from the document. However, they behave differently in some important ways. First difference — what they contain. NodeList can contain multiple types of nodes such as: • Elements • Text nodes • Comment nodes HTMLCollection contains only HTML elements. Second difference — Static vs Live collections. NodeList (usually static) const items = document.querySelectorAll(".item") If the DOM changes later, the NodeList does not update automatically. HTMLCollection (live) const items = document.getElementsByClassName("item") If elements are added or removed from the DOM, the HTMLCollection updates automatically. Third difference — forEach support. NodeList supports forEach directly. document.querySelectorAll(".item").forEach(el => { console.log(el) }) HTMLCollection does not support forEach, so we often convert it to an array. Where do we get them from? NodeList is returned by: • querySelectorAll() • childNodes HTMLCollection is returned by: • getElementsByClassName() • getElementsByTagName() How do we use them? Both are commonly used to loop through elements and manipulate the DOM. For example, attaching event listeners to multiple buttons: const buttons = document.querySelectorAll(".btn") buttons.forEach(btn => { btn.addEventListener("click", () => { console.log("clicked") }) }) Final thought. NodeList and HTMLCollection may look similar in the console, but understanding their behavior (especially static vs live collections) helps avoid subtle bugs when the DOM changes dynamically. Small DOM concepts like these often make a big difference when building real applications. #javascript #NodeList #HTMLCollection Suraj Kumar Jha Hitesh Choudhary #chaicode #chaiaurcode

JavaScript Was Hard I’d hear from so many people that JavaScript is confusing because of its inconsistencies. But once I learned these concepts, it became so much easier to me : 𝟭. 𝗩𝗮𝗿𝗶𝗮𝗯𝗹𝗲𝘀 𝗮𝗻𝗱 𝗗𝗮𝘁𝗮 𝗧𝘆𝗽𝗲𝘀:  -> Declaration (`var`, `let`, `const`)  -> Primitive data types (strings, numbers, booleans, null, undefined)  -> Complex data types (arrays, objects, functions)  -> Type coercion and conversion 𝟮. 𝗢𝗽𝗲𝗿𝗮𝘁𝗼𝗿𝘀 𝗮𝗻𝗱 𝗘𝘅𝗽𝗿𝗲𝘀𝘀𝗶𝗼𝗻𝘀:  -> Arithmetic operators (+, -, *, /, %)  -> Assignment operators (=, +=, -=, *=, /=, %=)  -> Comparison operators (==, ===, !=, !==, <, >, <=, >=)  -> Logical operators (&&, || , !)  -> Ternary operator (conditional operator) 𝟯. 𝗖𝗼𝗻𝘁𝗿𝗼𝗹 𝗙𝗹𝗼𝘄:  -> Conditional statements (`if`, `else if`, `else`)  -> Switch statement  -> Loops (`for`, `while`, `do-while`)  -> Break and continue statements 𝟰. 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀:  -> Function declaration and expression  -> Arrow functions  -> Parameters and arguments  -> Return statement  -> Scope (global scope, function scope, block scope)  -> Closures  -> Callback functions 𝟱. 𝗔𝗿𝗿𝗮𝘆𝘀 𝗮𝗻𝗱 𝗢𝗯𝗷𝗲𝗰𝘁𝘀:  -> Creation and initialization  -> Accessing and modifying elements  -> Array methods (push, pop, shift, unshift, splice, slice, concat, etc.)  -> Object properties and methods  -> JSON (JavaScript Object Notation) 𝟲. 𝗖𝗹𝗮𝘀𝘀𝗲𝘀 𝗮𝗻𝗱 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲𝘀:  -> Class syntax (constructor, methods, static methods)  -> Inheritance  -> Prototypal inheritance  -> Object.create() and Object.setPrototypeOf() 𝟳. 𝗘𝗿𝗿𝗼𝗿 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴:  -> Try...catch statement  -> Throwing errors  -> Error objects (Error, SyntaxError, TypeError, etc.)  -> Error handling best practices 𝟴. 𝗔𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁:  -> Callbacks  -> Promises (creation, chaining, error handling)  -> Async/await syntax  -> Fetch API  -> setTimeout() and setInterval() 𝟵. 𝗗𝗢𝗠 𝗠𝗮𝗻𝗶𝗽𝘂𝗹𝗮𝘁𝗶𝗼𝗻:  -> Selecting DOM elements  -> Modifying element properties and attributes  -> Creating and removing elements  -> Traversing the DOM 𝟭𝟬. 𝗘𝘃𝗲𝗻𝘁 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴:  -> Adding event listeners  -> Event objects  -> Event propagation (bubbling and capturing)  -> Event delegation 𝟭𝟭. 𝗠𝗼𝗱𝘂𝗹𝗲𝘀 𝗮𝗻𝗱 𝗠𝗼𝗱𝘂𝗹𝗮𝗿𝗶𝘇𝗮𝘁𝗶𝗼𝗻:  -> ES6 modules (import/export)  -> CommonJS modules (require/module.exports)  -> Module bundlers (Webpack, Rollup) 𝟭𝟮. 𝗕𝗿𝗼𝘄𝘀𝗲𝗿 𝗖𝗼𝗺𝗽𝗮𝘁𝗶𝗯𝗶𝗹𝗶𝘁𝘆 𝗮𝗻𝗱 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲:  -> Cross-browser compatibility  -> Performance optimization techniques  -> Minification and code splitting  -> Lazy loading If you're struggling with JavaScript, understanding these topics can make the journey a lot easier! I've Created MERN Stack Guide for beginners to experienced,  𝗚𝗲𝘁 𝘁𝗵𝗲 𝗚𝘂𝗶𝗱𝗲 𝗵𝗲𝗿𝗲 - https://lnkd.in/d6EdjzCs Follow Mohit Decodes on YouTube: https://lnkd.in/dEqvkECV Keep Coding, Keep Building!

Event Delegation Sounds simple yet it is a powerful technique in JavaScript. To learn about it, we need to know about the concept of 'Event Bubbling". 'Event Bubbling' is a JavaScript process where an event triggered on a DOM element propagates upward through its ancestors in the DOM tree until it reaches the root i.e. the document or window. While moving upwards it triggers the event handlers on each parent element. When an event occurs, 3 phases are completed. First happens the "Event Capturing" phase where the event starts from the very root and continues to propagate through all the DOM elements one by one until the target element is found. During phase two, the event reaches the target element and executes its event handler. Afterwards, phase three happens which is 'Event Bubbling' - here the event propagates upward through the ancestor elements one by one toward the root and triggers their handlers too. This is a default behavior in JS and can be stopped using `e.stopPropagation()` where 'e' is the event. Let's get back to our topic. Event delegation is a technique in JavaScript where instead of attaching event listeners to multiple child elements individually, a single event listener is attached to the common parent element that contains the child elements. As a result, when an event of a child will eventually propagate upward during the event bubbling phase, the parent can capture & handle it. Examples: • Without Event Delegation ❌ `const buttons = document.querySelectorAll(".task-btn"); buttons.forEach((button) => {  button.addEventListener("click", function () {   alert("You clicked " + button.textContent);  }); });` • With Event Delegation ✅ `const taskList = document.getElementById("taskList"); taskList.addEventListener("click", function (event) {  if (event.target.classList.contains("task-btn")) {   alert("You clicked " + event.target.textContent);  } });` 💡 e.target = the actual clicked element (child) 💡 e.currentTarget = the element the listener is attached to (parent) Now, you might wonder - "What's the problem in attaching event listeners to every child element individually?" Well, there are several issues due to this approach. Attaching event listeners to many elements can hurt performance because each element gets its own handler. `document.querySelectorAll(".item").forEach(item => item.addEventListener("click", handleClick));` This increases memory usage and event processing. It also fails when elements are later added dynamically: `const item = document.createElement("div"); item.className="item"; document.body.appendChild(item);` Since listeners were attached earlier, this new element doesn't get any. It also leads to repetitive code like: `btn1.addEventListener("click", fn); btn2.addEventListener("click", fn);` Therefore, event delegation solves these issues by attaching one listener to the parent, and utilizing event bubbling. This keeps the code cleaner and works for both existing and future elements.