DOM Questions

Browse questions under selected topic.

Toggle Active Class

Easy
3 views 24 Jan 2026
You have a button with id btn and a box with id box. When user clicks button, toggle class active on #box. Write the JavaScript code....
0 0 solutions View Details

Build HTML Table Rows

Medium
4 views 24 Jan 2026
You are given an array of objects like {name,score}. Create table rows inside . For each item, add namescore....
0 0 solutions View Details

Show/Hide Text on Button Click

Easy
3 views 24 Jan 2026
You have a button #btn and a text box #box. On click, toggle #box display between block and none....
0 0 solutions View Details

Live Character Count

Easy
2 views 24 Jan 2026
You have and . While typing, show current character count inside #count....
0 0 solutions View Details

Add Item to List

Easy
2 views 24 Jan 2026
You have , , and
    . On button click, add a new
  • with input text (trim). Ignore if empty....
0 0 solutions View Details

Remove Element by Click

Easy
3 views 24 Jan 2026
You have many elements with class card. When any card is clicked, remove only that card from DOM....
0 0 solutions View Details

Highlight Even Table Rows

Easy
2 views 24 Jan 2026
You have a table with rows inside . Add class even-row to every even row (2nd, 4th, ...)....
0 0 solutions View Details

Toggle Password Visibility

Easy
3 views 24 Jan 2026
You have and . On click, change input type between password and text, and update button text to SHOW/HIDE....
0 0 solutions View Details

Disable Submit for Empty Required

Easy
3 views 24 Jan 2026
You have a form #f with inputs having attribute data-req=1. Disable button #submit until all required inputs have some value (trimmed)....
0 0 solutions View Details

Run Click Handler Only Once

Easy
2 views 24 Jan 2026
You have a button #once. When clicked first time, set its text to DONE and disable it. Further clicks should not run the handler logic....
0 0 solutions View Details

Read Data Attribute and Show It

Easy
2 views 24 Jan 2026
You have
and . On page load, read data-id and show it inside #out....
0 0 solutions View Details

Dynamic List Delete (Event Delegation)

Medium
2 views 24 Jan 2026
You have
    where each
  • contains text and a Delete. Items can be added later. On clicking Delete, remove that
  • . Use event delegation....
0 0 solutions View Details

Debounce Search Filter

Medium
2 views 24 Jan 2026
You have and many items with class item inside #list. Filter items by text content (case-insensitive). Debounce the filtering by 300ms....
0 0 solutions View Details

Tabs Component

Medium
2 views 24 Jan 2026
You have buttons with class tab-btn and data-tab=panelId. Panels have class tab-panel and id matching data-tab. On click, show only that panel and add class active on the clicked button....
0 0 solutions View Details

Accordion Toggle

Medium
4 views 24 Jan 2026
You have sections .acc where each has a header .acc-head and body .acc-body. On clicking header, toggle its body. Close other bodies in the same container....
0 0 solutions View Details

Modal Open/Close with ESC

Medium
4 views 24 Jan 2026
You have #open button and a modal #modal with a close button #close. On open show modal (add class show). On close/ESC click hide it (remove class show)....
0 0 solutions View Details

Smooth Scroll to Section

Medium
3 views 24 Jan 2026
You have anchor links with class jump and href like #section1. On click, prevent default and smoothly scroll to the target element....
0 0 solutions View Details

Copy Text to Clipboard

Medium
2 views 24 Jan 2026
You have . On click, copy data-copy text to clipboard and change button text to COPIED for 1 second....
0 0 solutions View Details

Serialize Form to JSON

Medium
3 views 24 Jan 2026
You have a form #f and a 
. On submit, prevent default and print JSON of all fields into #out. Multiple same-name fields should become an array....
0 0 solutions View Details

Lazy Load Images

Medium
4 views 24 Jan 2026
Images have data-src and class lazy. When an image is near viewport, set its src from data-src and remove class lazy. Use IntersectionObserver....
0 0 solutions View Details

Infinite Scroll Add Items

Medium
2 views 24 Jan 2026
You have
. When user scrolls near bottom (within 200px), append 10 new
Item N
. Keep count with variable start....
0 0 solutions View Details

Resizable Box (Drag Handle)

Medium
2 views 24 Jan 2026
You have a box #box and a handle #handle in its bottom-right corner. On dragging handle, resize the box (width/height) with minimum 100px....
0 0 solutions View Details

Auto Save Textarea to localStorage

Medium
7 views 24 Jan 2026
You have and a . Save textarea value to localStorage key note_text on input (debounced 200ms). On load, restore. Clear button removes storage and clears textarea....
0 0 solutions View Details

Sort Table by Clicking Header

Medium
3 views 24 Jan 2026
You have a table #t with . Rows are in . On clicking a header, sort rows by that column text. Toggle asc/desc each time....
0 0 solutions View Details

Max Length Counter with Warning

Medium
4 views 24 Jan 2026
You have and . Show how many characters left. If limit exceeded, add class bad on #text....
0 0 solutions View Details

Simple Tooltip on Hover

Hard
4 views 24 Jan 2026
Elements with attribute data-tip should show a tooltip div near mouse on hover and hide on mouse leave....
0 0 solutions View Details

Hash Router (Single Page)

Hard
3 views 24 Jan 2026
You have a container #view and multiple templates , etc. Use location.hash (like #home). On hash change, render matching template into #view. Default to home....
0 0 solutions View Details

Sortable List (Drag and Drop)

Hard
2 views 24 Jan 2026
You have
    with
  • . Allow user to reorder list items by drag and drop....
0 0 solutions View Details

Modal Focus Trap (Accessibility)

Hard
4 views 24 Jan 2026
You have #modal with focusable elements and class show means open. When open, trap Tab/Shift+Tab inside modal. ESC closes....
0 0 solutions View Details

Virtual List Rendering

Hard
3 views 24 Jan 2026
You have a container #list with fixed height and overflow auto. Render 10000 rows but keep only visible rows in DOM using virtualization. Row height is 30px....
0 0 solutions View Details

Undo/Redo for Textarea

Hard
3 views 24 Jan 2026
You have , , . Keep history of changes (max 50). Undo/redo should update textarea value....
0 0 solutions View Details

Auto Number Headings with MutationObserver

Hard
3 views 24 Jan 2026
You have a container #article where headings are

. Prefix each heading text with its number like '1. Title'. If headings change later, auto re-number....

0 0 solutions View Details

Keyboard Navigation Dropdown

Hard
3 views 24 Jan 2026
You have
with and
  • ..
. Implement open/close and keyboard: Enter/Space opens, ArrowDown/ArrowUp moves focus inside list, E...
0 0 solutions View Details

Clipboard Copy with Fallback

Hard
3 views 24 Jan 2026
You have #btn and #src (text input). On click copy #src value. Use navigator.clipboard when available, else fallback using a hidden textarea and document.execCommand('copy'). Show result in #msg....
0 0 solutions View Details

Image Gallery Lightbox

Hard
3 views 24 Jan 2026
You have thumbnails .thumb with data-full URL. On click, open overlay #light with . Clicking overlay closes. ESC closes too....
0 0 solutions View Details