title: Load more button in Svelte
body: <p>I am exploring Svelte, and it is great. However I have a question, more it is a problem. I am trying to implement a simple load more button, this is my code:</p>
  <pre><code>&lt;script&gt;
    import { onMount } from &quot;svelte&quot;;
  
    let data = [];
  
    onMount(async () =&gt; {
      const res = await fetch(`./past-reza.json`);
      data = await res.json();
    });
  
        let currentItems = 2;
      loadmore.addEventListener('click', (e) =&gt; {
          const elementList = [...document.querySelectorAll('.list-element')];
          for (let i = currentItems; i &lt; currentItems + 2; i++) {
              if (elementList[i]) {
                  elementList[i].style.display = 'block';
              }
          }
          currentItems += 2;
  
         
          if (currentItems &gt;= elementList.length) {
              event.target.style.display = 'none';
          }
      })
  &lt;/script&gt;
  </code></pre>
  <p>and my HTML part looks like this:</p>
  <pre><code>{#each data as item}
    &lt;div class=&quot;list-element&quot;&gt;
      &lt;h2&gt;{item.title}&lt;/h2&gt;
    &lt;/div&gt;
  {/each}
  </code></pre>
  <p>and load more button</p>
  <pre><code> &lt;button
      id=&quot;loadmore&quot;
      type=&quot;button&quot;
      class=&quot;btn btn-secondary&quot;&gt;
      Show more
    &lt;/button&gt;
  </code></pre>
  <p>Problem is that my content not showing with this part of the JS code that I added for <code>load more</code>.</p>
  <p>Can anybody try to help me with this?</p>