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.

Practice

1. What does the on:click directive do in a Svelte component?

easy

A. It styles the element when clicked.

B. It runs code when the user clicks on the element.

C. It prevents the element from being clicked.

D. It changes the element's text automatically.

Solution

1. Step 1: Understand the purpose of on:click

   The on:click directive listens for click events on an element.

2. Step 2: Identify what happens on click

   When the element is clicked, the code inside the handler runs.

3. Final Answer:

   It runs code when the user clicks on the element. -> Option B

4. Quick Check:

   on:click runs code on click [OK]

Hint: Remember: on:click runs code when clicked [OK]

Common Mistakes:

• Thinking it styles the element automatically
• Believing it disables clicks
• Assuming it changes text without code

2. Which of the following is the correct syntax to run a function handleClick when a button is clicked in Svelte?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Recall Svelte event syntax

   Svelte uses on:eventName={handler} syntax for event listeners.

2. Step 2: Match correct syntax

   on:click={handleClick} is the correct way to attach the click handler.

3. Final Answer:

   <button on:click={handleClick}>Click me</button> -> Option A

4. Quick Check:

   Svelte uses on:eventName syntax [OK]

Hint: Use on:click={function} for click events [OK]

Common Mistakes:

• Using React style onClick instead of on:click
• Swapping event and on keywords
• Using @click which is Vue syntax

3. Given this Svelte code:

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

What will the button display after clicking it 3 times?

medium

A. Clicked 0 times

B. Clicked 1 times

C. Clicked 3 times

D. Clicked NaN times

Solution

1. Step 1: Understand the initial state and function

   The variable count starts at 0. The increment function adds 1 to count each click.

2. Step 2: Calculate count after 3 clicks

   After 3 clicks, count becomes 0 + 3 = 3.

3. Final Answer:

   Clicked 3 times -> Option C

4. Quick Check:

   count increments by 1 per click [OK]

Hint: Count increases by 1 each click [OK]

Common Mistakes:

• Forgetting to update count on click
• Assuming count resets
• Confusing initial value with updated value

4. What is wrong with this Svelte code snippet?

<button on:click=increment()>Click me</button>
<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

medium

A. The function call should be inside curly braces: on:click={increment}

B. The function increment is missing parentheses in the script

C. The count variable should be declared inside the button

D. The on:click event should be written as onClick

Solution

1. Step 1: Check event handler syntax

   In Svelte, event handlers must be assigned a function reference inside curly braces, not called immediately.

2. Step 2: Identify the error

   Using on:click=increment() calls the function immediately instead of on click. Correct is on:click={increment}.

3. Final Answer:

   The function call should be inside curly braces: on:click={increment} -> Option A

4. Quick Check:

   Use on:click={function} not on:click=function() [OK]

Hint: Use curly braces for function references in on:click [OK]

Common Mistakes:

• Calling function immediately instead of passing reference
• Using React style onClick instead of on:click
• Placing variables inside HTML tags incorrectly

5. You want to create a Svelte component with two buttons: one increments a counter, the other resets it to zero. Which code correctly implements this behavior?

hard

A. <script>
let count = 0;
function increment() { count += 1; }
function reset() { count = 0; }
</script>

<button onClick={increment}>Increment</button>
<button onClick={reset}>Reset</button>
<p>Count: {count}</p>

B. <script>
let count = 0;
function increment() { count += 1; }
function reset() { count = 0; }
</script>

<button on:click={increment()}>Increment</button>
<button on:click={reset()}>Reset</button>
<p>Count: {count}</p>

C. <script>
let count = 0;
function increment() { count += 1; }
function reset() { count = 0; }
</script>

<button on:click=increment>Increment</button>
<button on:click=reset>Reset</button>
<p>Count: {count}</p>

D. <script>
let count = 0;
function increment() { count += 1; }
function reset() { count = 0; }
</script>

<button on:click={increment}>Increment</button>
<button on:click={reset}>Reset</button>
<p>Count: {count}</p>

Solution

1. Step 1: Check event handler syntax correctness

   <script>
     let count = 0;
     function increment() { count += 1; }
     function reset() { count = 0; }
   </script>
   
   <button on:click={increment}>Increment</button>
   <button on:click={reset}>Reset</button>
   <p>Count: {count}</p>

   uses on:click={increment} and on:click={reset}, which is correct Svelte syntax.

2. Step 2: Identify errors in other options

   <script>
     let count = 0;
     function increment() { count += 1; }
     function reset() { count = 0; }
   </script>
   
   <button on:click={increment()}>Increment</button>
   <button on:click={reset()}>Reset</button>
   <p>Count: {count}</p>

   calls functions immediately, which is wrong.

   <script>
     let count = 0;
     function increment() { count += 1; }
     function reset() { count = 0; }
   </script>
   
   <button on:click=increment>Increment</button>
   <button on:click=reset>Reset</button>
   <p>Count: {count}</p>

   misses curly braces.

   <script>
     let count = 0;
     function increment() { count += 1; }
     function reset() { count = 0; }
   </script>
   
   <button onClick={increment}>Increment</button>
   <button onClick={reset}>Reset</button>
   <p>Count: {count}</p>

   uses React style onClick, invalid in Svelte.

3. Final Answer:

   Correct syntax: on:click={increment} and on:click={reset} -> Option D

4. Quick Check:

   Use on:click={function} with curly braces [OK]

Hint: Pass function references with curly braces in on:click [OK]

Common Mistakes:

• Calling functions immediately in event handlers
• Omitting curly braces around handlers
• Using React event syntax instead of Svelte