JavaScript

Question 1

How do you create the illusion that you’re clicking from one page to another without actually changing pages?

Answer 1

The contents of both “pages” already exist in the HTML. Add a button with a click event listener, and a function that hides the contents of the first page and shows the contents of the next page.

Question 2

Let’s say I have some data, like an array of objects, and I want to create a new HTML element for each object in that array. How do I do that?

Answer 2

A forEach loop with document.createElement().

forEach(answer => {
const button = document.createElement(‘button’)
button.innerText = answer.text;
answerButtonsElement.appendChild(button)
});

Question 3

What if I want to remove a long list of elements when I click one thing

Answer 3

Create a reset state function that fires inside another function that’s activated during the click event and a while loop that loops over the elements in question. One example:

function resetState() {
while (element.firstChild) {

       element.removeChild(element.firstChild);
	}
}

Question 4

What if multiple elements have the same click event listener, but I need to know which one the user targetted?

Answer 4

Use e.target inside the function.

function selectAnswer(e) {
const selectedButton = e.target;
}