if loesning === null

1 <!-- _komponenter/Teller.svelte --> 2 <script> 3 export let navn 4 export let verdi = 0

5 6 // Variabler for å styre endringen 7 let endrerNavn = false 8 let endringsforslag = "" 9 </script>

10 11 {#if endrerNavn} 12 <!-- Dette vises hvis man trykker på endre-knappen --> 13 <label>Nytt navn: <input bind:value={endringsforslag} /></label> 14 <button 15 on:click={() => {

16 17 navn = endringsforslag endrerNavn = false

18 }} 19 > 20 Lagre 21 </button> 22 <button on:click={() => (endrerNavn = false)}> Avbryt </button> 23 {:else} 24 <span> 25 <!--

26 27 Vi har lagt navn i en span-tag med litt rom til høyre og kuttet ut kolonet

28 --> 29 <span style="margin-right: 0.5rem">

30 {navn}

31 32 <!-- Knapp for å aktivere endring --> <button

33 34 35 36 37 > on:click={() => { endringsforslag = navn endrerNavn = true

38



39 </button> 40 </span> 41 <button on:click={() => (verdi = verdi - 1)}>-</button> 42 {verdi} 43 <button on:click={() => (verdi = verdi + 1)}>+</button> 44 </span> 45 {/if}

Merk: Hvis du tester denne handlelisten, vil du kanskje oppdage at den oppfører seg litt rart i noen situasjoner. Dette er en feil vi har beholdt med vilje, slik at vi kan se på den i neste delkapittel.