Невозможно использовать .insertAdjacentHTML во вложенном цикле for
Как сказано в заголовке, я не могу использовать .insertAdjacentHTML, потому что просто не понимаю, как это сделать.
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/>')
}
}Я хочу, чтобы входные классы были похожи на l1c1 l1c2 l1c3 и так далее, но я не могу заставить это j работать как переменная. Он используется как строка, поэтому все мои классы - l1cj l2cj и так далее.
Меня очень смущает тот факт, что мне приходится использовать так много кавычек.
Как его использовать, чтобы получить желаемый эффект?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Если у меня есть это право, вы пытаетесь создать матрицу из l строк и c столбцов. Вместо того, чтобы прикреплять элементы (как HTML) к DOM на каждой итерации цикла (что требует больших затрат производительности), просто вставьте каждый ввод в массив. Затем вы можете присоединиться к этому массиву и использовать insertAdjacentHTML для добавления HTML-кода на страницу в конце.
Здесь я также использовал литерал шаблона, чтобы не было путаницы в том, куда должны идти кавычки. Я добавил заполнитель для ввода, чтобы показать вам, как выглядят классы, чтобы вам не приходилось проверять страницу.
Надеюсь, это поможет.
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>В шаблон можно вставить буквальные переменные, например ${var}. Это означает, что вам не нужно держать строку в кавычках / отменять кавычки, чтобы вставить их.
Извините за поздний ответ. Спасибо за ваше время. Сейчас попробую использовать.
Ваше цитирование неверно. j не должен быть внутри кавычек.
document.querySelector(".matrice-" + p).insertAdjacentHTML('beforeend', '<input class = "l' + i + 'c' + j + '" size = "3" maxlength = "4" inputmode = "numeric"></input>')
Метод в другом ответе будет более эффективным - каждый раз, когда вы вызываете insertAdjacentHTML(), браузер должен анализировать новый HTML. Как правило, лучше делать все сразу.
Не могли бы вы объяснить это? "l $ {i} c $ {j}"