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.