Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 11, 2022 12:06 am GMT

How to pass arguments to events like on:click in Svelte

Svelte events are the way we add interactivity to components in Svelte. A common issue with Svelte events is adding arguments to functions called within them. For example, suppose we have a basic counter, which increases any time the user clicks on it:

<script>    // we write export let to say that this is a property    // that means we can change it later!    let x = 0;    const addToCounter = function() {        ++x;    }</script><button id="counter" on:click={addToCounter}>{x}</button>

This works fine, but let's say we want to change it so that we increase the counter by a certain amount whenever it is clicked. We might try changing the code to something like this:

<script>    // we write export let to say that this is a property    // that means we can change it later!    let x = 0;    const addToCounter = function(amount) {        x += amount;    }</script><button id="counter" on:click={addToCounter(5)}>{x}</button>

But this WONT work - instead we need to change our event to contain a function instead. To add arguments to our addToCounter function, we have to do something like this instead:

<button id="counter" on:click={() => addToCounter(5)}>{x}</button>

Here, we call a function, which returns the value produced by addToCounter. This also works for events, so if you want to pass the event or e object to your function, you could do something like this:

<button id="counter" on:click={(e) => addToCounter(e)}>{x}</button>

Original Link: https://dev.to/smpnjn/how-to-pass-arguments-to-events-like-onclick-in-svelte-79l

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To