Trecho do código abaixo onde eu uso um for dentro de uma função para criar um elemento <li> que vem em forma de uma string de uma API, onde colocarei a descrição do lanche dentro
Meu problema é que quando adiciono a <ul> acima do for o código fecha automaticamente a <ul> deixando a <li> criada com o for por fora da <ul>
Ex.
Pseudo código:
<ul>
For{
<li> "descrição"
</li>
}
</ul>
Saída com erro:
<ul> </ul>
<li> "descrição" </li>
Saída correta:
<ul>
<li> "descrição" </li>
</ul>
function exibirCardapio(cardapio) {
inserirItensCardapio.innerHTML += ``;
cardapio.forEach(item => {
descricao = item.descricao;
itensDescricao = descricao.split(/\n/);
inserirItensCardapio.innerHTML += `
<ul class="cartao__lanche">
<img src="${item.imagem}" alt="${item.alt}" class="imagem--lanche">
<h3 class="titulo--lanche">${item.titulo}</h3>
<ul class="container__descricao--lanche">`
for (let contador = 0; contador < itensDescricao.length; contador++) {
inserirItensCardapio.innerHTML +=`<li class="ingredientes--lanche">`
inserirItensCardapio.innerHTML += itensDescricao[contador];
inserirItensCardapio.innerHTML +=`</li>`
}
inserirItensCardapio.innerHTML +=`</ul>
<div class="container__comprar">
<h2 class="preco--lanche">Apenas R$ ${item.preco}</h2>
<button name="Comprar" class="comprar--lanche" id="${item.titulo}">Comprar</button>
</div>
</ul>`;
descricao = ""
itensDescricao = ""
})
}
function forloop(){
descricao = item.descricao;
for (let contador = 0; contador < descricao.length; contador++) {
return descricao[contador].split("\n");
}
}
Item li da Descrição, que foi criada com for está fora da ul