Vfrdtyky

As the title says, I can't use .insertAdjacentHTML because I just don't get how.

for(let i=1;i<=m;i++)

    {

        for(let j=1;j<=n;j++)

        {

            document.querySelector(".matrice-" + p).insertAdjacentHTML('beforeend', '<input class="l' + i + 'c' + 'j" size="3" maxlength="4" inputmode="numeric"></input>')

        }

        document.querySelector(".matrice-" + p).insertAdjacentHTML('beforeend', '<br/>')

    }

    }

I want the input classes to be like l1c1 l1c2 l1c3 and so on but I can't seem to get that j to work as the variable. It is being used as a string so all my classes are l1cj l2cj and so on.

The fact that I have to use so many quotation marks really confuses me.

How should I use it to get the desired effect?

If I've got this right you're trying to create a maxtrix of l rows and c columns. Instead of attaching elements (as HTML) to the DOM on each loop iteration (which is costly performance-wise), just push each input into an array. Then you can join that array and use insertAdjacentHTML to add the HTML to the page at the end.

Here I've used a template literal too so there is less confusion about where the quotes should go. I added a placeholder to the input to show you how the classes look so you don't have to inspect the page.

Hope it helps.

const arr = ;

const m = n = 3;



for (let i = 1; i <= m; i++) {

  for (let j = 1; j <= n; j++) {

    const input = `

      <input

        class="l${i}c${j}

        size="3"

        maxlength="4"

        inputmode="numeric"

        placeholder="l${i}c${j}"

      />`;

    arr.push(input);

  }

}



const root = document.querySelector('#root')

root.insertAdjacentHTML('beforeend', arr.join(''));

* {

  box-sizing: border-box;

}



#root {

  max-width: 100px;

  padding: 10px;

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  grid-gap: 10px;

}



input {

  -moz-appearance:textfield;

}

<div id="root"></div>

Your quoting is wrong. j should not be inside the quotes.

document.querySelector(".matrice-" + p).insertAdjacentHTML('beforeend', '<input class="l' + i + 'c' + j + '" size="3" maxlength="4" inputmode="numeric"></input>')

The method in the other answer will be more efficient -- every time you call insertAdjacentHTML() the browser has to parse the new HTML. Doing it all at once is generally better.