load 3 more items [JS]-CodePudding

I'm trying to understand these few strings of JS code that basically define the function that once clicked on the button, 3 other elements are loaded on the page (if there are any).

Although I have read the documentation I don't understand this line

boxes[i].style.display = 'inline-block';

this is the complete code

let loadMoreBtn = document.querySelector('.packages .load-more .btn'); //seleziono il primo elem con questa classe
let currentItem = 3; // # offerte caricate dopo il click  

loadMoreBtn.onclick = () =>{
   let boxes = [...document.querySelectorAll('.packages .box-container .box')]; //salvo in boxes tutti gli elem che hanno questa classe
   for (var i = currentItem; i < currentItem   3; i  ){ 
      boxes[i].style.display = 'inline-block';  
   };
   currentItem  = 3;
   if(currentItem >= boxes.length){
      loadMoreBtn.style.display = 'none';
   }

CodePudding user response：

The line you provided is using javascript to modify the CSS properties of an element. If you are interested about different display options, check out the CSS display syntax.

So basically what your snippet does: when you click on the load more button, it will set the display: inline-block on the next 3 boxes in the list. If there are no more boxes, the load more button will become hidden (display: none)

CodePudding user response：

The first thing to note is that you're running the code inside a for-loop, which is used for iterating through elements one-by-one. boxes[i] is the element being referred to at that point in the loop.

The 'element.style.display' part is setting a CSS property of that element. In this case, it's setting the display property to 'inline-block', which will make elements show up side-by-side (as apposed to, perhaps, 'block', which would instead make new elements show up below the block'ed item).

I've given a breakdown of what's happening below by adding comments before most lines:

// Grab the clickable button.
let loadMoreBtn = document.querySelector('.packages .load-more .btn');

// We start counting from the third item. I guess we're assuming some items
// are already visible?
let currentItem = 3;

// This function is called when the button is clicked.
loadMoreBtn.onclick = () => {
  // This find all elements that match the classes 'packages', 'box-container', and 'box'
  const allElements = document.querySelectorAll('.packages .box-container .box');

  // This is using a spread operator to place our elements inside an array.
  let boxes = [ ...allElements ];

  // Loop through all the items we matched using querySelectorAll above. We
  // start counting at whatever `currentItem` is. The loop will keep running
  // until `i` is 3 less than `currentItem` (or not loop at all if that
  // condition is already met).
  for (let i = currentItem; i < currentItem   3; i  ) {
    // Display the element.
    boxes[i].style.display = 'inline-block';
  }

  currentItem  = 3;
  if (currentItem >= boxes.length) {
    // Hide the button if there are no more elements to loop through.
    loadMoreBtn.style.display = 'none';
  }
// [...]

CodePudding user response：

It basically sets the display property of that element to inline-block. This can be done with CSS (by setting display: inline-block;) or with JavaScript by setting changing the element.style.display property to inline-block.