Breaking News: Grepper is joining You.com. Read the official announcement!

on button click display a specific amount data in JavaScript

Mehadi Hasan (Diner) answered on July 30, 2023 Popularity 1/10 Helpfulness 1/10

answer on button click display a specific amount data in JavaScript

on button click display a specific amount data in JavaScript

Comment

import { products } from './data.js';
import displayProducts from './components/displayProducts.js';

const showMoreBtn = document.querySelector('.products-btn');

let currentItems = 0;

const displayNextFour = () => {
    displayProducts(products.slice(currentItems, currentItems + 4));
    // Display next 4 items until their amount exceeds 
    // the array length 
    if (!(currentItems + 4 > products.length)) {
        currentItems += 4;
    }
    // Remove event listener from 'Show more' button and
    // hide it after all items from the array are displayed
    if (currentItems === products.length) {
        showMoreBtn.removeEventListener('click', displayNextFour);
        showMoreBtn.style.display = 'none';
    }
};

displayNextFour();

showMoreBtn.addEventListener('click', displayNextFour);

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: button click display javascript

Link to this answer
Share Copy Link