The Trade Desk·Software Engineer·Technical Phone Screen·Junior

JuniorPrefer not to say

Jul 2026

Summary

Interviewed for a software engineer role at The Trade Desk and got a frontend JavaScript question that felt more like a quick knowledge check than a real coding challenge.

Questions Asked (1)

Given an HTML page with a button element, write JavaScript to attach a click event listener using document.querySelector and addEventListener so that clicking the button logs its text content to the console. Also explain what e.target refers to in that context.

Technical Trade-offsAPI & Integrations

Author's notes

Pretty straightforward DOM stuff.

Create a free account to read the full note

AI HintsAI Generated

Suggested Approach

Start by writing the JavaScript code that selects the button using document.querySelector and attaches a click listener with addEventListener. Then, explain that e.target refers to the element that triggered the event, which in this case is the button itself, and demonstrate how to access its text content. Keep the explanation concise and focus on the practical use of e.target for event delegation and dynamic elements.

Pro tip: Mention that using e.target allows the handler to work even if the button's content changes or if the listener is attached to a parent element for event delegation. This shows awareness of scalable event handling patterns.

1. Select the button

Use document.querySelector to select the button element, e.g., const button = document.querySelector('button');. Ensure the selector is specific enough to target the intended button.

2. Attach event listener

Call button.addEventListener('click', function(e) { ... }); to listen for click events. The handler receives the event object e.

3. Log text content

Inside the handler, use console.log(e.target.textContent); to log the button's text. Alternatively, use this.textContent if using a regular function, but e.target is more explicit.

4. Explain e.target

Clarify that e.target is the element that dispatched the event, i.e., the button that was clicked. It allows access to properties like textContent, id, or classList.

5. Discuss event delegation (optional)

Mention that if the listener were attached to a parent, e.target could be a child element, enabling event delegation. This is useful for dynamic content.

Key Points to Mention

document.querySelector returns the first matching element; ensure the selector is correct.
addEventListener takes the event type ('click') and a callback function.
The event object e is automatically passed to the handler.
e.target is the element that triggered the event, not necessarily the element the listener is attached to.
e.currentTarget refers to the element the listener is attached to, which may differ from e.target.
Using e.target.textContent is safe if the button contains only text; for nested elements, consider e.target.innerText or e.target.textContent carefully.

AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.