DOM event listeners (on:click) in Svelte - Mini Project: Build & Apply

DOM event listeners (on:click) in Svelte

📖 Scenario: You are building a simple interactive button on a webpage. When the user clicks the button, it should update a message shown on the page.

🎯 Goal: Create a Svelte component with a button that changes a message when clicked using the on:click event listener.

📋 What You'll Learn

Create a variable to hold the message text

Add a button element with an on:click event listener

Update the message variable inside the click event handler

Display the message text in the component

💡 Why This Matters

🌍 Real World

Buttons with click events are everywhere on websites and apps. Learning to handle clicks lets you make interactive features like forms, menus, and games.

💼 Career

Understanding event listeners in Svelte is essential for frontend developers building modern web applications with reactive user interfaces.

1

Set up the message variable

Create a variable called message and set it to the string "Hello!" inside the <script> tag.

Svelte

  // Create the message variable here


{message}

Need a hint?

Use let message = "Hello!"; inside the <script> tag.

2

Add the button element

Add a <button> element below the paragraph with the text Click me.

Svelte

  let message = "Hello!";


{message}

Need a hint?

Write <button>Click me</button> below the paragraph.

3

Add the click event listener

Add an on:click event listener to the <button> that changes the message variable to "Button clicked!".

Svelte

  let message = "Hello!";


{message}

Click me

Need a hint?

Use on:click={() => message = "Button clicked!"} inside the <button> tag.

4

Complete the interactive component

Ensure the component shows the updated message text when the button is clicked by keeping the paragraph displaying {message}.

Svelte

  let message = "Hello!";


{message}

 message = "Button clicked!"}>Click me

Need a hint?

Make sure the paragraph uses {message} to show the current message.