How to Pass Parameters to on:click in Svelte?

Parameters are the data that you want to pass to a function when an event, such as a click, occurs. In Svelte, you can pass parameters to the on:click event handler in a couple of ways, either directly within the event handler or by using element references.

In this article, we will explore two different approaches to pass parameters to on:click in Svelte.

Steps to Create a Svelte Application

Step 1: Install Node.js

Make sure Node.js is installed on your machine. You can Install node.js from official website.

Step 2: Create Svelte Application

Open your terminal and run the following command to set up a new Svelte project:

npx degit sveltejs/template svelte-app

Step 3: Navigate to Your Project Directory

Change to the newly created project directory:

cd svelte-app

Step 4: Install Dependencies

Install the required npm packages:

npm install

Project Structure:

The updated dependencies in package.json file are:

  "devDependencies": {
    "@rollup/plugin-commonjs": "^24.0.0",
    "@rollup/plugin-node-resolve": "^15.0.0",
    "@rollup/plugin-terser": "^0.4.0",
    "rollup": "^3.15.0",
    "rollup-plugin-css-only": "^4.3.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.1.2",
    "svelte": "^3.55.0"
  },
  "dependencies": {
    "sirv-cli": "^2.0.0"
  }

Passing Parameters Directly in the Event Handler

In this approach, we are directly passing the parameter 'GeeksforGeeks' to the handleClick function within the on:click event handler. When the button is clicked, the function is invoked with the specified argument, triggering an alert that displays the message with the provided name.

Example: The below example passes parameters directly to the event handler.

<!--App.svelte-->

<script>
    function handleClick(name) {
        alert(`Hello, ${name}!`);
    }
</script>

<h1 style="color: green; text-align: center;">
  	GeeksforGeeks
</h1>
<h3 style="text-align: center;">
  	Approach 1: Passing Parameters 
  	Directly in the Event Handler
</h3>

<div style="text-align: center; margin-top: 20px;">
    <button on:click={() => handleClick('GeeksforGeeks')}>
		Click me
  	</button>
</div>

Steps to Run the Application

Open the terminal, run this command from your root directory to start the application

npm run dev

Open your browser and navigate to http://localhost:5000

Output:

Using bind to Pass a Reference

In this approach, we are using bind:this to create a reference to the button element and passing that reference along with other parameters to the handleClick function. When the button is clicked, the event object and the additional parameter 'GeeksforGeeks' are passed to the function, which then updates a message displayed on the page.

Example: The below example uses bind to Pass a Reference.

<!--App.svelte-->

<script>
    let buttonElement;
    let message = "Click the button to see the magic!";

    function handleClick(event, name) {
        message = `Hello, ${name}! You clicked the button with text: "${event.target.textContent}"`;
    }
</script>

<h1 style="color: green; text-align: center;">
  	GeeksforGeeks
</h1>
<h3 style="text-align: center;">
  	Approach 2: Using bind:this to Pass a Reference
</h3>

<div style="text-align: center; margin-top: 20px;">
    <button 
		bind:this={buttonElement} 
		on:click={(event) => handleClick(event, 'GeeksforGeeks')} >
        Click me
    </button>
</div>

<p style="text-align: center; margin-top: 20px;">
    {message}
</p>

Output:

Conclusion

You can pass parameters ro on:click in Svelte event handlers using inline arrow functions for simplicity or leverage bind:this to pass element references. Both methods are effective, offering flexibility based on your use case and requirements.