-4

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

2
  • Monte a string como uma variável e atribua ao innerHTML só no fim. Você não pode passar código inválido como innerHMTL, o browser vai "consertar" pra você. Além disso, evite alterar várias vezes o mesmo innerHTML, cada alteração potencialmente recalcula todo o layout da página.
    – bfavaretto
    Commented 13/06/2023 às 18:13
  • Obrigado 👍 bfavaretto Commented 13/06/2023 às 18:39

1 Resposta 1

-2
function exibirCardapio(cardapio) {
    inserirItensCardapio.innerHTML = '';

    cardapio.forEach(item => {
        const descricao = item.descricao;
        const itensDescricao = descricao.split(/\n/);

        const listaDescricao = gerarListaDescricao(itensDescricao);

        inserirItensCardapio.innerHTML += `
            <ul class="cartao__lanche">
                <img src="${item.imagem}" alt="${item.alt}" class="imagem--lanche">
                <h3 class="titulo--lanche">${item.titulo}</h3>
                ${listaDescricao}
                <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>`;
    });
}

function gerarListaDescricao(itensDescricao) {
    let listaDescricaoHTML = '<ul class="container__descricao--lanche">';

    for (let contador = 0; contador < itensDescricao.length; contador++) {
        listaDescricaoHTML += `<li class="ingredientes--lanche">${itensDescricao[contador]}</li>`;
    }

    listaDescricaoHTML += '</ul>';

    return listaDescricaoHTML;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .