DOM event listeners (on:click) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the button is clicked?

Consider this Svelte component. What will be the value of count after clicking the button twice?

Svelte

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment}>Click me</button>
<p>{count}</p>

A Error: increment is not defined

B 1

C 2

D 0

💡 Hint

Remember that each click triggers the increment function which adds 1 to count.

Each click calls the increment function, increasing count by 1. After two clicks, count is 2.

📝 Syntax

intermediate

Which option correctly attaches a click event listener in Svelte?

Select the correct syntax to attach a click event listener that calls handleClick in Svelte.

Svelte

function handleClick() {
  alert('Clicked!');
}

A <button onClick={handleClick}>Click</button>

B <button on:click={handleClick}>Click</button>

C <button onclick={handleClick}>Click</button>

D <button on-click={handleClick}>Click</button>

💡 Hint

Svelte uses a special directive syntax for events starting with 'on:'.

Svelte uses the 'on:event' directive syntax. Only option B uses 'on:click' correctly.

🔧 Debug

advanced

Why does the click event not update the count?

Look at this Svelte component. Why does clicking the button not update the displayed count?

Svelte

<script>
  let count = 0;
  function increment() {
    count = count + 1;
  }
</script>
<button on:click="increment()">Click me</button>
<p>{count}</p>

A The increment function does not update count correctly.

B The button element is missing a type attribute.

C The count variable is not reactive because it is not declared with let.

D The on:click attribute is using quotes and a string, so the function is not called.

💡 Hint

Check how event handlers are attached in Svelte and how expressions are passed.

In Svelte, event handlers must be passed as expressions without quotes. Using quotes passes a string, so the function is not called.

❓ state_output

advanced

What is the output after clicking the button three times?

Given this Svelte component, what will be the output shown in the paragraph after clicking the button three times?

Svelte

<script>
  let count = 0;
  function increment() {
    count += 2;
  }
</script>
<button on:click={increment}>Click me</button>
<p>{count}</p>

A 6

B 3

C 0

D Error: count is not defined

💡 Hint

Each click adds 2 to count. Multiply by number of clicks.

Each click adds 2, so after 3 clicks count is 2 * 3 = 6.

🧠 Conceptual

expert

Which option correctly prevents the default action on a click event in Svelte?

You want to prevent the default action of a link when clicked using Svelte's event modifiers. Which option does this correctly?

Svelte

<script>
  function handleClick(event) {
    // prevent default here
  }
</script>
<a href="https://example.com" on:click={handleClick}>Go</a>

A <a href="https://example.com" on:click|preventDefault={handleClick}>Go</a>

B <a href="https://example.com" on:click.preventDefault={handleClick}>Go</a>

C <a href="https://example.com" on:click={event => { event.preventDefault(); handleClick(event); }}>Go</a>

D <a href="https://example.com" on:click={handleClick} preventDefault>

💡 Hint

Svelte uses event modifiers with a pipe symbol to modify event behavior.

Svelte's correct syntax to prevent default is using the '|preventDefault' modifier on the event directive.

Practice

1. What does the on:click directive do in a Svelte component?

easy

A. It styles the element when clicked.

B. It runs code when the user clicks on the element.

C. It prevents the element from being clicked.

D. It changes the element's text automatically.

Solution

1. Step 1: Understand the purpose of on:click

   The on:click directive listens for click events on an element.

2. Step 2: Identify what happens on click

   When the element is clicked, the code inside the handler runs.

3. Final Answer:

   It runs code when the user clicks on the element. -> Option B

4. Quick Check:

   on:click runs code on click [OK]

Hint: Remember: on:click runs code when clicked [OK]

Common Mistakes:

• Thinking it styles the element automatically
• Believing it disables clicks
• Assuming it changes text without code

2. Which of the following is the correct syntax to run a function handleClick when a button is clicked in Svelte?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Recall Svelte event syntax

   Svelte uses on:eventName={handler} syntax for event listeners.

2. Step 2: Match correct syntax

   on:click={handleClick} is the correct way to attach the click handler.

3. Final Answer:

   <button on:click={handleClick}>Click me</button> -> Option A

4. Quick Check:

   Svelte uses on:eventName syntax [OK]

Hint: Use on:click={function} for click events [OK]

Common Mistakes:

• Using React style onClick instead of on:click
• Swapping event and on keywords
• Using @click which is Vue syntax

3. Given this Svelte code:

 <script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment}>Clicked {count} times</button>

What will the button display after clicking it 3 times?

medium

A. Clicked 0 times

B. Clicked 1 times

C. Clicked 3 times

D. Clicked NaN times

Solution

1. Step 1: Understand the initial state and function

   The variable count starts at 0. The increment function adds 1 to count each click.

2. Step 2: Calculate count after 3 clicks

   After 3 clicks, count becomes 0 + 3 = 3.

3. Final Answer:

   Clicked 3 times -> Option C

4. Quick Check:

   count increments by 1 per click [OK]

Hint: Count increases by 1 each click [OK]

Common Mistakes:

• Forgetting to update count on click
• Assuming count resets
• Confusing initial value with updated value

4. What is wrong with this Svelte code snippet?

<button on:click=increment()>Click me</button>
<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

medium

A. The function call should be inside curly braces: on:click={increment}

B. The function increment is missing parentheses in the script

C. The count variable should be declared inside the button

D. The on:click event should be written as onClick

Solution

1. Step 1: Check event handler syntax

   In Svelte, event handlers must be assigned a function reference inside curly braces, not called immediately.

2. Step 2: Identify the error

   Using on:click=increment() calls the function immediately instead of on click. Correct is on:click={increment}.

3. Final Answer:

   The function call should be inside curly braces: on:click={increment} -> Option A

4. Quick Check:

   Use on:click={function} not on:click=function() [OK]

Hint: Use curly braces for function references in on:click [OK]

Common Mistakes:

• Calling function immediately instead of passing reference
• Using React style onClick instead of on:click
• Placing variables inside HTML tags incorrectly

5. You want to create a Svelte component with two buttons: one increments a counter, the other resets it to zero. Which code correctly implements this behavior?

hard

A. <script>
let count = 0;
function increment() { count += 1; }
function reset() { count = 0; }
</script>

<button onClick={increment}>Increment</button>
<button onClick={reset}>Reset</button>
<p>Count: {count}</p>

B. <script>
let count = 0;
function increment() { count += 1; }
function reset() { count = 0; }
</script>

<button on:click={increment()}>Increment</button>
<button on:click={reset()}>Reset</button>
<p>Count: {count}</p>

C. <script>
let count = 0;
function increment() { count += 1; }
function reset() { count = 0; }
</script>

<button on:click=increment>Increment</button>
<button on:click=reset>Reset</button>
<p>Count: {count}</p>

D. <script>
let count = 0;
function increment() { count += 1; }
function reset() { count = 0; }
</script>

<button on:click={increment}>Increment</button>
<button on:click={reset}>Reset</button>
<p>Count: {count}</p>

Solution

1. Step 1: Check event handler syntax correctness

   <script>
     let count = 0;
     function increment() { count += 1; }
     function reset() { count = 0; }
   </script>
   
   <button on:click={increment}>Increment</button>
   <button on:click={reset}>Reset</button>
   <p>Count: {count}</p>

   uses on:click={increment} and on:click={reset}, which is correct Svelte syntax.

2. Step 2: Identify errors in other options

   <script>
     let count = 0;
     function increment() { count += 1; }
     function reset() { count = 0; }
   </script>
   
   <button on:click={increment()}>Increment</button>
   <button on:click={reset()}>Reset</button>
   <p>Count: {count}</p>

   calls functions immediately, which is wrong.

   <script>
     let count = 0;
     function increment() { count += 1; }
     function reset() { count = 0; }
   </script>
   
   <button on:click=increment>Increment</button>
   <button on:click=reset>Reset</button>
   <p>Count: {count}</p>

   misses curly braces.

   <script>
     let count = 0;
     function increment() { count += 1; }
     function reset() { count = 0; }
   </script>
   
   <button onClick={increment}>Increment</button>
   <button onClick={reset}>Reset</button>
   <p>Count: {count}</p>

   uses React style onClick, invalid in Svelte.

3. Final Answer:

   Correct syntax: on:click={increment} and on:click={reset} -> Option D

4. Quick Check:

   Use on:click={function} with curly braces [OK]

Hint: Pass function references with curly braces in on:click [OK]

Common Mistakes:

• Calling functions immediately in event handlers
• Omitting curly braces around handlers
• Using React event syntax instead of Svelte