CODEWITHSUNDEEP
svelte
Števo Kelbel
Števo Kelbel

Reputation: 75

Svelte how to get text value after click on element ('li')?

how can i get text value in Svelte if i click on element ?

I need update variable if i click on element - li item.

my code :

<script>
    let languages = ['sk','cz','en','at']
    let activeLang = 'en'
</script>
<ul>
    {#each languages as language }
    <li on:click={activeLang = ???} >{language}</li>
    {/each}
</ul>

many thanks for your help.

Upvotes: 5

Views: 4957

Answers (1)

johannchopin
johannchopin

Reputation: 14873

The on:click give you back an event parameter. You can then with this one access the innerText of the li by using event.target.innerText.

So here in your example:

<script>
    let languages = ['sk','cz','en','at']
    let activeLang = 'en'
</script>

<ul>
    {#each languages as language }
    <li on:click={(event) => activeLang = event.target.innerText} >{language}</li>
    {/each}
</ul>

Have a look at the REPL.

But since you already have the language variable that contains the needed information, just assign this one to activeLang on click inside of the callback:

<script>
    let languages = ['sk','cz','en','at']
    let activeLang = 'en'
</script>

<ul>
    {#each languages as language }
    <li on:click={() => activeLang = language} >{language}</li>
    {/each}
</ul>

See the REPL.

Upvotes: 10

Related Questions