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.

Practice

1. What is the main purpose of JavaScript on a webpage?

easy

A. To style the webpage with colors and fonts

B. To make the webpage interactive by responding to user actions

C. To store data permanently on the server

D. To create static text content only

Solution

1. Step 1: Understand JavaScript's role

   JavaScript is used to add interactivity, meaning it reacts to what users do on the page.

2. Step 2: Compare with other web technologies

   Styling is done by CSS, and static content is HTML. Data storage is server-side, not JavaScript's main job.

3. Final Answer:

   To make the webpage interactive by responding to user actions -> Option B

4. Quick Check:

   JavaScript = Interactivity [OK]

Hint: JavaScript = webpage actions and reactions [OK]

Common Mistakes:

• Confusing JavaScript with CSS for styling
• Thinking JavaScript stores data permanently
• Believing JavaScript only creates static content

2. Which of the following is the correct way to add a click event listener to a button with id myBtn in JavaScript?

easy

A. document.querySelector('myBtn').addEventListener('click', alert('Clicked!'));

B. document.getElementById('myBtn').onClick = alert('Clicked!');

C. document.getElementById('myBtn').addEventListener('click', function() { alert('Clicked!'); });

D. document.getElementById('myBtn').addEventListener('onclick', function() { alert('Clicked!'); });

Solution

1. Step 1: Identify correct method and event name

   The method to add event listeners is addEventListener and the event name is 'click', not 'onclick'.

2. Step 2: Check function syntax

   The event handler should be a function, so function() { alert('Clicked!'); } is correct. Directly calling alert('Clicked!') passes the result, not the function.

3. Final Answer:

   document.getElementById('myBtn').addEventListener('click', function() { alert('Clicked!'); }); -> Option C

4. Quick Check:

   Use addEventListener('click', function) [OK]

Hint: Use addEventListener with event name and function [OK]

Common Mistakes:

• Using 'onclick' instead of 'click' in addEventListener
• Assigning event handler directly instead of a function
• Using querySelector without '#' for id

3. What will be the output when the following code runs and the button is clicked?

const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  btn.textContent = 'Clicked!';
});

medium

A. The button text changes to 'Clicked!' when clicked

B. An error occurs because textContent is not valid

C. Nothing happens when the button is clicked

D. The button disappears from the page

Solution

1. Step 1: Understand event listener effect

   The code listens for a click on the button and changes its text content to 'Clicked!'.

2. Step 2: Confirm textContent usage

   textContent is the correct property to change the visible text inside an element.

3. Final Answer:

   The button text changes to 'Clicked!' when clicked -> Option A

4. Quick Check:

   Click event changes button text [OK]

Hint: textContent changes visible text on click [OK]

Common Mistakes:

• Thinking textContent is invalid property
• Expecting the button to disappear
• Assuming no change happens without page reload

4. Identify the error in this code snippet that tries to change the background color of a div with id box when clicked:

const box = document.getElementById('box');
box.addEventListener('click', changeColor);

function changeColor() {
  box.style.background = 'blue';
}

medium

A. The getElementById method is incorrect and should be querySelector

B. The event listener should use 'onclick' instead of 'click'

C. The function changeColor should be anonymous inside addEventListener

D. The property 'background' should be 'backgroundColor' to change color

Solution

1. Step 1: Check CSS property used in JavaScript

   To change background color, the correct style property is backgroundColor, not background.

2. Step 2: Verify event listener and function usage

   Using 'click' event and named function is valid. getElementById is correct for id selection.

3. Final Answer:

   The property 'background' should be 'backgroundColor' to change color -> Option D

4. Quick Check:

   Use style.backgroundColor to change background color [OK]

Hint: Use style.backgroundColor, not style.background [OK]

Common Mistakes:

• Using 'background' instead of 'backgroundColor'
• Confusing 'click' event with 'onclick'
• Thinking function must be anonymous

5. You want to create a button that toggles the visibility of a paragraph with id text each time it is clicked. Which code snippet correctly implements this behavior?

hard

A. const btn = document.getElementById('btn');
const text = document.getElementById('text');
btn.addEventListener('click', () => {
if (text.style.display === 'none') {
text.style.display = 'block';
} else {
text.style.display = 'none';
}
});

B. const btn = document.getElementById('btn');
const text = document.getElementById('text');
btn.addEventListener('click', () => {
text.style.visibility = 'hidden';
});

C. const btn = document.getElementById('btn');
const text = document.getElementById('text');
btn.onclick = function() {
text.style.display = 'visible';
};

D. const btn = document.getElementById('btn');
const text = document.getElementById('text');
btn.addEventListener('click', () => {
text.style.display = 'block';
});

Solution

1. Step 1: Understand toggle logic

   To toggle visibility, check if display is 'none' and switch it to 'block', else set to 'none'.

2. Step 2: Analyze each option

   const btn = document.getElementById('btn'); const text = document.getElementById('text'); btn.addEventListener('click', () => { if (text.style.display === 'none') { text.style.display = 'block'; } else { text.style.display = 'none'; } }); correctly toggles between 'none' and 'block'. const btn = document.getElementById('btn'); const text = document.getElementById('text'); btn.addEventListener('click', () => { text.style.visibility = 'hidden'; }); only hides once. const btn = document.getElementById('btn'); const text = document.getElementById('text'); btn.onclick = function() { text.style.display = 'visible'; }; uses invalid 'visible' for display. const btn = document.getElementById('btn'); const text = document.getElementById('text'); btn.addEventListener('click', () => { text.style.display = 'block'; }); only shows without toggling.

3. Final Answer:

   const btn = document.getElementById('btn'); const text = document.getElementById('text'); btn.addEventListener('click', () => { if (text.style.display === 'none') { text.style.display = 'block'; } else { text.style.display = 'none'; } }); -> Option A

4. Quick Check:

   Toggle display between 'none' and 'block' [OK]

Hint: Toggle display style between 'none' and 'block' [OK]

Common Mistakes:

• Using visibility instead of display for toggling
• Setting display to invalid values like 'visible'
• Not toggling, only hiding or showing once