Inline event handlers in Svelte - Mini Project: Build & Apply

Inline event handlers in Svelte

📖 Scenario: You are building a simple interactive webpage where users can click a button to increase a counter. This is a common feature on many websites to show likes, votes, or clicks.

🎯 Goal: Create a Svelte component that shows a number starting at zero and a button. When the button is clicked, the number increases by one using an inline event handler.

📋 What You'll Learn

Create a variable called count initialized to 0.

Add a button element with an inline on:click event handler.

The inline event handler should increase count by 1 when clicked.

Display the current value of count in the component.

💡 Why This Matters

🌍 Real World

Inline event handlers are used in many interactive web apps to respond immediately to user actions like clicks, taps, or key presses.

💼 Career

Understanding inline event handlers in Svelte is essential for building responsive user interfaces in modern web development jobs.

1

Set up the count variable

Create a variable called count and set it to 0 inside the <script> tag.

Svelte

  // Your code here

Hint

Use let count = 0; inside the <script> tag to create a reactive variable.

2

Add a button with an inline click event

Add a <button> element below the <script> tag with an inline on:click event handler that increases count by 1 using count += 1.

Svelte

  let count = 0;

Hint

Use <button on:click={count += 1}>Click me</button> to add the inline event handler.

3

Display the current count

Below the button, add a paragraph <p> that shows the current value of count using curly braces {count}.

Svelte

  let count = 0;


Click me

Hint

Use <p>Count: {count}</p> to show the current count.

4

Make the button accessible with aria-label

Add an aria-label attribute to the <button> with the value Increase count to improve accessibility.

Svelte

  let count = 0;


 >Click me

Count: {count}

Hint

Add aria-label=\"Increase count\" inside the <button> tag.

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