Inline event handlers in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a click event handler that calls the handleClick function.

Svelte

<button [1]={handleClick}>Click me</button>

Drag options to blanks, or click blank then click option'

Aon:click

Bclick

Cbind:click

Devent:click

Attempts:

3 left

💡 Hint

Common Mistakes

Using just 'click' without 'on:' prefix.

Using 'bind:click' which is for binding values, not events.

Using 'event:click' which is not valid in Svelte.

In Svelte, inline event handlers use the on:event syntax. Here, on:click attaches the click event.

2fill in blank

medium

Complete the code to call increment function when the button is clicked.

Svelte

<button [1]={() => increment()}>Add 1</button>

Drag options to blanks, or click blank then click option'

Aon:change

Bbind:click

Cclick

Don:click

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bind:click' which is incorrect for events.

Using 'click' without 'on:' prefix.

Using 'on:change' which listens for input changes, not clicks.

The on:click directive attaches the click event. The arrow function calls increment() when clicked.

3fill in blank

hard

Fix the error in the code by completing the event handler syntax correctly.

Svelte

<input type="text" [1]={handleInput} />

Drag options to blanks, or click blank then click option'

Aonchange

Bbind:value

Con:input

Dinput

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bind:value' which binds the value but does not handle events.

Using 'input' without 'on:' prefix.

Using 'onchange' which triggers only when input loses focus.

To handle input events in Svelte, use on:input. This listens to each keystroke.

4fill in blank

hard

Fill both blanks to create a button that calls submitForm on click and disables while loading is true.

Svelte

<button [1]={submitForm} disabled=[2]>Submit</button>

Drag options to blanks, or click blank then click option'

Aon:click

Bloading

C!loading

Dbind:disabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bind:disabled' which is not needed here.

Setting disabled to '!loading' which disables button when not loading.

Using 'click' without 'on:' prefix.

Use on:click to handle clicks and set disabled attribute to loading to disable the button while loading.

5fill in blank

hard

Fill all three blanks to create an input that updates name on input, calls validate on blur, and disables if isDisabled is true.

Svelte

<input type="text" bind:value=[1] on:blur=[2] disabled=[3] />

Drag options to blanks, or click blank then click option'

Aname

Bvalidate

CisDisabled

DhandleBlur

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong function name for blur event.

Not binding value correctly.

Setting disabled to wrong variable.

Bind the input value to name, call validate on blur, and disable input when isDisabled is true.

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