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.