Javascript 3 x 3 flexbox with button increasing number-CodePudding

I have a box 2 x 2 using flex property with number 0 inside each box, and a button to click

function click() {
    var id = "item-";;
    for(var i = 1; i <= 6; i  ) {
      id = id   i;
      var element = document.getElementById(id);
      var value = element.innerHTML;
      value  ;
      document.getElementById(id).innerHTML = value;
    }     
}

<div >
  <div >
    <div id="item-1">0</div>
    <div id="item-2">0</div>
    <div id="item-3">0</div>
  </div>
  <div >
    <div id="item-4">0</div>
    <div id="item-5">0</div>
    <div id="item-6">0</div>
  </div>
</div>
<button  onclick="click()">Click</button>

I want to create a function click() that if I click a button then the number inside the box will increase, but not all numbers in all boxes. I want the number increasing box by box.

But my function only increases the value in the first box. Can someone let me know what should I do, please?

CodePudding user response：

Currently, first iteration of the for () will work because id will become item-1, but the second iteration you will create the new id, but you just append i, so it becomes item-12 instead of item-2

Just only remember the id and prefix it with item- when you use it. Then after each press, update the innerHTML and increase the counter, or reset to 1 if we've just updated the last <div>

var currentIndex = 1;

function incrementButton() {
    let element = document.getElementById('item-'   currentIndex);
    element.innerHTML =   element.innerHTML;
     
    currentIndex = (currentIndex === 6) ? 1 :   currentIndex;
}

<div >
  <div >
    <div id="item-1">0</div>
    <div id="item-2">0</div>
    <div id="item-3">0</div>
  </div>
  <div >
    <div id="item-4">0</div>
    <div id="item-5">0</div>
    <div id="item-6">0</div>
  </div>
</div>
<button  onclick="incrementButton()">Click</button>

CodePudding user response：

is this what you want?

I also make that the grid is generated in javascript if you have more containers, etc...

function generateGrid(
  parentElement = document.body,
  numContainers = 2,
  numItemsPerContainer = 3,
) {
  for (let i = 0; i < numContainers; i  ) {
    createContainer();

    function createContainer() {
      const container = document.createElement("div");
      parentElement.appendChild(container);

      container.classList.add(`container-${i   1}`);

      createChilds();

      function createChilds() {
        for (let j = 0; j < numItemsPerContainer; j  ) {
          const child = document.createElement("div");
          child.classList.add(`item-${j   1}`);
          child.textContent = 0;

          container.appendChild(child);

          child.onclick = () => {
            child.textContent =  child.textContent   1;
          }
        }
      }
    }
  }
}

generateGrid(
  document.querySelector(".flex-container")
);

<div ></div>