JavaScript for interactivity in Intro to Computing - Practice Problems & Coding Challenges

Challenge - 5 Problems

🔍 Analysis

intermediate

What is the output of this JavaScript code snippet?

Consider the following code that adds a click event listener to a button. What will be logged to the console when the button is clicked?

Intro to Computing

const button = document.createElement('button');
button.textContent = 'Click me';
document.body.appendChild(button);

button.addEventListener('click', () => {
  console.log('Button clicked!');
});

// Simulate a click event
button.click();

A undefined

B Button clicked!

C SyntaxError

D No output

💡 Hint

Think about what happens when the click event is triggered programmatically.

The button.click() method programmatically triggers the click event, so the event listener runs and logs 'Button clicked!'.

🧠 Conceptual

intermediate

Which statement best describes event bubbling in JavaScript?

When a user clicks on a nested element inside a parent element, how does event bubbling affect the event flow?

A The event triggers handlers on the clicked element and then moves up to its ancestors.

B The event triggers handlers randomly on any element in the document.

C The event triggers handlers on the ancestors first, then on the clicked element.

D The event triggers handlers only on the clicked element, ignoring ancestors.

💡 Hint

Think about how events travel from the deepest element outward.

Event bubbling means the event starts at the target element and then moves up through its parent elements, triggering their event handlers in order.

❓ trace

advanced

Trace the output of this JavaScript code with event delegation

What will be logged to the console when the user clicks on the second list item?

Intro to Computing

const list = document.createElement('ul');
['One', 'Two', 'Three'].forEach(text => {
  const li = document.createElement('li');
  li.textContent = text;
  list.appendChild(li);
});
document.body.appendChild(list);

list.addEventListener('click', event => {
  console.log(event.target.textContent);
});

// Simulate clicking the second list item
list.children[1].click();

A Two

B One

C undefined

D SyntaxError

💡 Hint

Remember that event.target is the actual clicked element, not the element with the listener.

The event listener is on the ul, but event.target refers to the clicked li. Clicking the second li logs 'Two'.

❓ identification

advanced

Identify the issue in this JavaScript code for toggling a class

What will happen when the button is clicked?

Intro to Computing

const btn = document.createElement('button');
btn.id = 'myBtn';
btn.textContent = 'Click me';
document.body.appendChild(btn);
btn.addEventListener('click', function() {
  this.classList.toggle;
});

A TypeError: this.classList.toggle is not a function

B SyntaxError: missing parentheses

C No error thrown

D ReferenceError: btn is not defined

💡 Hint

Check how the toggle method is called.

The code references this.classList.toggle without parentheses, so it does not call the function. No error is thrown, but no class is toggled.

❓ Comparison

expert

Which option correctly prevents the default form submission behavior?

Given a form with a submit button, which event handler code correctly stops the form from submitting and refreshing the page?

Intro to Computing

<form id="myForm">
  <input type="text" name="name" />
  <button type="submit">Submit</button>
</form>

<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', event => {
  // What goes here?
});
</script>

A event.stopPropagation(); console.log('Form submission stopped');

B event.defaultPrevented = true; console.log('Form submission stopped');

C return false; console.log('Form submission stopped');

D event.preventDefault(); console.log('Form submission stopped');

💡 Hint

Which method is designed to stop default browser actions?

event.preventDefault() stops the browser's default action, such as submitting a form and refreshing the page. Other options do not prevent submission correctly.