Checkpoint: JavaScript in the Browser

Five questions on this section. Answer all of them, then see your score and why each answer is right or wrong.

A script in the <head> runs document.querySelector("#total").textContent = "$0.00"; and throws Cannot set properties of null. The id is spelled correctly. What fixes it?

Use getElementById("total") instead.
Wrap the line in try/catch.
Use innerHTML instead of textContent.
Add defer to the script tag (or load it with type="module"), so it runs after the page is parsed.

Pocket adds a click listener to each <li> when the page loads. Expenses added later do not respond to clicks. What is the best fix?

Put one listener on the list container and use event.target.closest("li") to find the clicked item.
Add the listeners again a second later with setTimeout.
Put an onclick="..." attribute in each item’s HTML string.
Re-add listeners to every item every second with setInterval.

After pressing Enter in Pocket’s form, the page reloads and the URL gains ?label=Tea. The handler is form.addEventListener("submit", () => { addExpense(); });. What is the cause?

The submit event only fires for mouse clicks, not for Enter.
addExpense must be an async function.
The handler never calls event.preventDefault(), so the browser performs its normal submission.
The form is missing an action attribute.

After a reload, localStorage.getItem("pocket") returns the text [object Object]. What went wrong when saving?

Storage was full, so the data was truncated.
The object was passed to setItem without JSON.stringify, so it was converted with String().
JSON.parse was called twice on load.
The key was misspelled when loading.

The server answers this request with status 500 and an HTML error page. What happens?

JavaScript

async function load() {
  const res = await fetch("/api/expenses");
  return res.json();
}

fetch rejects with an error saying “HTTP 500”.
load() resolves with undefined.
fetch resolves, then res.json() rejects with a SyntaxError because the body is HTML, not JSON.
The browser retries the request until it succeeds.

5 questions unanswered