Inline event handlers in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when clicking the button?

Consider this Svelte component with an inline click event handler:

<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>Click me</button>
<p>Count: {count}</p>

What will the displayed count be after clicking the button 3 times?

Svelte

<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>Click me</button>
<p>Count: {count}</p>

A Count: 3

B Count: 0

C Count: 1

D Count: NaN

💡 Hint

Think about how the inline arrow function updates the count variable each time the button is clicked.

The inline event handler increments the count variable by 1 on each click. After 3 clicks, count becomes 3, so the displayed text is Count: 3.

📝 Syntax

intermediate

Which inline event handler syntax is correct?

Which of the following inline event handlers in Svelte is syntactically correct for a button click?

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

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

C <button on:click=handleClick()>Click</button>

D <button on:click=(handleClick)>Click</button>

💡 Hint

Remember that in Svelte, event handlers expect a function reference, not the result of calling the function.

Option A passes the function handleClick as a reference, which is correct. Option A calls the function immediately, which is incorrect syntax for inline handlers. Options C and D are invalid syntax.

🔧 Debug

advanced

Why does this inline event handler cause an error?

Given this Svelte code snippet:

<script>
  let message = 'Hello';
</script>

<button on:click={() => message.toUpperCase() }>Click</button>
<p>{message}</p>

Why does the displayed message not change after clicking the button?

Svelte

<script>
  let message = 'Hello';
</script>

<button on:click={() => message.toUpperCase() }>Click</button>
<p>{message}</p>

A The inline handler syntax is invalid and causes a syntax error.

B The message variable is not updated because toUpperCase() returns a new string but does not change message.

C The code throws a runtime error because toUpperCase() is not a function.

D The message variable is updated but the UI does not re-render.

💡 Hint

Consider whether the message variable is reassigned inside the event handler.

The toUpperCase() method returns a new string but does not modify the original message variable. Since message is not reassigned, Svelte does not detect a change and the UI stays the same.

❓ state_output

advanced

What is the value of count after these clicks?

Analyze this Svelte component:

<script>
  let count = 0;
</script>

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

If the user clicks Increment twice, then Reset once, then Increment once, what is the displayed count?

Svelte

<script>
  let count = 0;
</script>

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

A Count: 0

B Count: 2

C Count: 1

D Count: 3

💡 Hint

Track each click and how it changes the count variable.

Clicks: Increment (count=1), Increment (count=2), Reset (count=0), Increment (count=1). Final count is 1.

🧠 Conceptual

expert

Which inline event handler correctly prevents default behavior?

In Svelte, you want to prevent the default form submission when clicking a submit button using an inline event handler. Which option correctly does this?

Svelte

<form on:submit|preventDefault={handleSubmit}>
  <button type="submit">Submit</button>
</form>

A <button on:click={event => event.preventDefault()}>Submit</button>

B <button on:click={handleSubmit}>Submit</button>

C <button on:click={handleSubmit} preventDefault>Submit</button>

D <button on:click|preventDefault={handleSubmit}>Submit</button>

💡 Hint

Recall how Svelte modifiers like |preventDefault are used inline.

Option D uses the Svelte event modifier |preventDefault correctly on the inline event handler. Option D prevents default only on click but does not call handleSubmit. Option D has invalid syntax. Option D does not prevent default behavior.

Practice

1. What is the correct way to attach a click event handler named handleClick inline in a Svelte component?

easy

A. <button click={handleClick}>Click me</button>

B. <button onClick={handleClick}>Click me</button>

C. <button on:click={handleClick}>Click me</button>

D. <button @click={handleClick}>Click me</button>

Solution

1. Step 1: Understand Svelte event syntax

   Svelte uses on:eventName={handler} to attach event handlers inline.

2. Step 2: Match the syntax with the options

   <button on:click={handleClick}>Click me</button> correctly uses on:click={handleClick}, which is the Svelte pattern.

3. Final Answer:

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

4. Quick Check:

   Inline event handler = on:eventName={handler} [OK]

Hint: Remember Svelte uses on:eventName, not onClick or @click [OK]

Common Mistakes:

• Using React-style onClick instead of on:click
• Omitting 'on:' prefix before event name
• Using '@click' which is Vue syntax

2. Which of the following is the correct syntax to handle a keydown event inline in Svelte?

easy

A. <input on:keydown={handleKeydown} />

B. <input onkeydown={handleKeydown} />

C. <input @keydown={handleKeydown} />

D. <input keydown={handleKeydown} />

Solution

1. Step 1: Recall Svelte event handler syntax

   Svelte requires the on: prefix before event names for inline handlers.

2. Step 2: Identify the correct option

   <input on:keydown={handleKeydown} /> uses on:keydown={handleKeydown}, which is the correct Svelte syntax.

3. Final Answer:

   <input on:keydown={handleKeydown} /> -> Option A

4. Quick Check:

   Event handler syntax = on:eventName={handler} [OK]

Hint: Always prefix event with 'on:' in Svelte inline handlers [OK]

Common Mistakes:

• Using React or Vue event syntax instead of Svelte's
• Missing the colon ':' after 'on'
• Using event name without any prefix

3. Given this Svelte code snippet, what will be the output when the button is clicked?

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

<button on:click={increment}>Clicked {count} times</button>

medium

A. Runtime error occurs on click

B. Button text remains 'Clicked 0 times' even after clicks

C. Button text shows 'Clicked NaN times' after click

D. Button text updates to 'Clicked 1 times' after first click

Solution

1. Step 1: Understand the event handler effect

   The increment function increases count by 1 on each click.

2. Step 2: Observe reactive update in Svelte

   Svelte automatically updates the displayed {count} value when count changes.

3. Final Answer:

   Button text updates to 'Clicked 1 times' after first click -> Option D

4. Quick Check:

   State updates trigger UI change = Button text updates to 'Clicked 1 times' after first click [OK]

Hint: Svelte auto-updates UI when reactive variables change [OK]

Common Mistakes:

• Expecting manual DOM update after state change
• Confusing syntax causing runtime errors
• Not realizing Svelte reactivity updates UI automatically

4. Identify the error in this Svelte code snippet:

<script>
  function sayHi() {
    alert('Hi!');
  }
</script>

<button on:click=sayHi>Say Hi</button>

medium

A. Missing curly braces around the handler function

B. Event name should be capitalized as on:Click

C. Function sayHi must be declared inside onMount

D. Alert cannot be used inside event handlers

Solution

1. Step 1: Check event handler syntax

   Svelte requires the handler to be inside curly braces: on:click={sayHi}.

2. Step 2: Identify the error in the code

   The code uses on:click=sayHi without braces, which is invalid syntax.

3. Final Answer:

   Missing curly braces around the handler function -> Option A

4. Quick Check:

   Handler must be in braces: on:event={handler} [OK]

Hint: Always wrap handler in curly braces for inline events [OK]

Common Mistakes:

• Omitting curly braces around handler
• Capitalizing event names incorrectly
• Thinking functions must be inside lifecycle hooks

5. You want to create a Svelte button that increments a counter only if the Shift key is held during the click. Which inline event handler code correctly implements this?

hard

A. <button on:click={event => { if(event.shiftKey) count += 1 }}>Increment</button>

B. <button on:click={incrementIfShift}>Increment</button>
<script>
let count = 0;
function incrementIfShift(event) {
if (event.shiftKey) count += 1;
}
</script>

C. <button on:click={event => { if(event.key === 'Shift') count++ }}>Increment</button>

D. <button on:click={incrementIfShift}>Increment</button>
<script>
let count = 0;
function incrementIfShift() {
if (event.shiftKey) count += 1;
}
</script>

Solution

1. Step 1: Understand event object usage in handlers

   To check if Shift is pressed, the event object must be accessed and passed to the handler.

2. Step 2: Check each option for correct event parameter and condition

   <button on:click={incrementIfShift}>Increment</button> <script> let count = 0; function incrementIfShift(event) { if (event.shiftKey) count += 1; } </script> correctly defines incrementIfShift(event) and checks event.shiftKey. <button on:click={incrementIfShift}>Increment</button> <script> let count = 0; function incrementIfShift() { if (event.shiftKey) count += 1; } </script> misses the event parameter. <button on:click={event => { if(event.shiftKey) count += 1 }}>Increment</button> uses inline arrow function correctly but does not declare count in snippet. <button on:click={event => { if(event.key === 'Shift') count++ }}>Increment</button> incorrectly checks event.key on click event.

3. Final Answer:

   Uses named function incrementIfShift(event) that checks event.shiftKey -> Option B

4. Quick Check:

   Pass event param and check event.shiftKey inside handler [OK]

Hint: Pass event param to handler to access shiftKey property [OK]

Common Mistakes:

• Not passing event parameter to handler function
• Checking event.key on click event instead of shiftKey
• Using inline handler without declaring count variable