DOM event listeners (on:click) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Svelte

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

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

Aonclick

Bon:click

Cclick

Dbind:click

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain HTML attribute like 'onclick' instead of Svelte's 'on:click'.

Using 'bind:click' which is not for event listeners.

In Svelte, the correct way to listen for a click event is using on:click.

2fill in blank

medium

Complete the code to update the count variable when the button is clicked.

Svelte

<script>
  let count = 0;
  function increment() {
    count += [1];
  }
</script>
<button on:click={increment}>Clicked {count} times</button>

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

A0

Bcount

C1

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Adding count to itself instead of adding 1.

Adding 0 which does not change the count.

To increase the count by one on each click, add 1 to the count variable.

3fill in blank

hard

Fix the error in the event listener syntax to correctly call toggle on button click.

Svelte

<button [1]="toggle()">Toggle</button>

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

Aon:click

Bonclick

Cbind:click

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the event handler like in plain HTML.

Using 'onclick' instead of 'on:click'.

In Svelte, event listeners must use the on:click syntax without quotes around the handler.

4fill in blank

hard

Fill both blanks to create a button that toggles the visible state on click and shows text conditionally.

Svelte

<script>
  let visible = false;
  function toggle() {
    visible = ![1];
  }
</script>
<button on:click=[2]>Toggle Text</button>
{#if visible}
  <p>The text is visible.</p>
{/if}

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

Avisible

Btoggle()

Ctoggle

Dvisible = !visible

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'toggle()' with parentheses in the button event binding.

Using the wrong variable name inside toggle function.

The toggle function flips the visible boolean, and the button calls the toggle function on click.

5fill in blank

hard

Fill all three blanks to create a button that increments count, disables when count reaches 5, and shows the count.

Svelte

<script>
  let count = 0;
  function increment() {
    count += [1];
  }
</script>
<button on:click=[2] disabled=[3]>Add</button>
<p>Count: {count}</p>

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

A1

Bincrement

Ccount >= 5

Dcount > 5

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'count > 5' which disables too late.

Calling increment with parentheses in the button event binding.

Increment by 1, call the increment function on click, and disable the button when count is 5 or more.