DOM event listeners (on:click) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the button is clicked?

Consider this Svelte component. What will be the value of count after clicking the button twice?

Svelte

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

A Error: increment is not defined

B 1

C 2

D 0

💡 Hint

Remember that each click triggers the increment function which adds 1 to count.

Each click calls the increment function, increasing count by 1. After two clicks, count is 2.

📝 Syntax

intermediate

Which option correctly attaches a click event listener in Svelte?

Select the correct syntax to attach a click event listener that calls handleClick in Svelte.

Svelte

function handleClick() {
  alert('Clicked!');
}

A <button onClick={handleClick}>Click</button>

B <button on:click={handleClick}>Click</button>

C <button onclick={handleClick}>Click</button>

D <button on-click={handleClick}>Click</button>

💡 Hint

Svelte uses a special directive syntax for events starting with 'on:'.

Svelte uses the 'on:event' directive syntax. Only option B uses 'on:click' correctly.

🔧 Debug

advanced

Why does the click event not update the count?

Look at this Svelte component. Why does clicking the button not update the displayed count?

Svelte

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

A The increment function does not update count correctly.

B The button element is missing a type attribute.

C The count variable is not reactive because it is not declared with let.

D The on:click attribute is using quotes and a string, so the function is not called.

💡 Hint

Check how event handlers are attached in Svelte and how expressions are passed.

In Svelte, event handlers must be passed as expressions without quotes. Using quotes passes a string, so the function is not called.

❓ state_output

advanced

What is the output after clicking the button three times?

Given this Svelte component, what will be the output shown in the paragraph after clicking the button three times?

Svelte

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

A 6

B 3

C 0

D Error: count is not defined

💡 Hint

Each click adds 2 to count. Multiply by number of clicks.

Each click adds 2, so after 3 clicks count is 2 * 3 = 6.

🧠 Conceptual

expert

Which option correctly prevents the default action on a click event in Svelte?

You want to prevent the default action of a link when clicked using Svelte's event modifiers. Which option does this correctly?

Svelte

<script>
  function handleClick(event) {
    // prevent default here
  }
</script>
<a href="https://example.com" on:click={handleClick}>Go</a>

A <a href="https://example.com" on:click|preventDefault={handleClick}>Go</a>

B <a href="https://example.com" on:click.preventDefault={handleClick}>Go</a>

C <a href="https://example.com" on:click={event => { event.preventDefault(); handleClick(event); }}>Go</a>

D <a href="https://example.com" on:click={handleClick} preventDefault>

💡 Hint

Svelte uses event modifiers with a pipe symbol to modify event behavior.

Svelte's correct syntax to prevent default is using the '|preventDefault' modifier on the event directive.