1

Fiz o seguinte programa para criar um sistema de restaurante que possui um cardápio e o usuário inserindo seus pedidos.

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
        <link rel="stylesheet" href="assets/css/style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

        <script src="assets/js/script.js"></script>
        <div id="cardápio" class="">
            <h1 id="cardapio-t">Cardápio</h1>
                <h2>Comida</h2>
            <ol>

                <li>Hámburger----------R$ 8,00</li>
                <li>Morango com chocolate----------R$ 5,00</li>
                <li>bolo----------R$15,00</li>
                <li>Brigadeiro----------R$3,00 </li>
                <li>Mouse de limão----------R$5,00</li>
            </ol>
                <h2>Bebida</h2>
                <ol>
                    <li>Suco de limão----------R$5,00</li>
                    <li>H20----------R$4,00</li>
                </ol>

    </div>

    <button onclick="preencher_Pedido()">prencher pedido</button>
    <button onclick="exibirPedido()" id="pedir">exibir Pedido</button>



    <div>
        <h1>Pedido</h1>
       <ul id="lista">

       </ul>


       <p>Total: <span id="valor"></span></p>
    </div>
</body>
</html>

Código JavaScript:

var itens_cardapio = ['Hamburger','Morango com chocolate','bolo','Brigadeiro','Mouse de limão','Suco de limão','H20'];
var preços = ['8','5','15','3','5','5','4'];
var index_itens;
var index_preços;
var Usuariopedido; 
var Usuariopedido2;
var itens;
 var soma;
 var Is;
 var Ip;
 var total;
 var resposta;
 Usuariopedido = [];
 total = []
 Usuariopedido2 = Usuariopedido;
 soma = 0;

function  preencher_Pedido() {

    for(var c of itens_cardapio){
         itens = c;
         index_itens = itens_cardapio.indexOf(c);
     }
     var pedido = prompt("Digite seu pedido:");
     if(pedido!= null|| pedido == itens){
      Usuariopedido2 = pedido;
}
}
for(var p of preços){
    index_preços = preços.indexOf(p);
}


function exibirPedido() {

    var listaElement = document.createElement("LI");
    var itenList = document.createTextNode(Usuariopedido2);

        if((itenList == 'Hamburger') && index_itens == 0 && index_preços == 0){
            listaElement.appendChild(itenList + 'R$' + 8 + ',00' );

        }else if((itenList == 'Morango com chocolate') &&  ((index_itens == 1) && (index_preços == 1))){
            listaElement.appendChild(itenList + 'R$' + 5 + ',00' );

        }else if((itenList == 'bolo') &&  ((index_itens == 2) && (index_preços == 2))){
            listaElement.appendChild(itenList + 'R$' + 15 + ',00' );

        }else if((itenList == 'Brigadeiro') &&  ((index_itens == 3) && (index_preços == 3))){
            listaElement.appendChild(itenList + 'R$' + 3 + ',00' );

        }else if((itenList == 'Mouse de limão') &&  ((index_itens == 4) && (index_preços == 4))){
            listaElement.appendChild(itenList + 'R$' + 5 + ',00' );

        }else if((itenList == 'Suco de limão') &&  ((index_itens == 5) && (index_preços == 5))){
            listaElement.appendChild(itenList + 'R$' + 5 + ',00' );

        }else if((itenList == 'H20') &&  ((index_itens == 6) && (index_preços == 6))){
            listaElement.appendChild(itenList + 'R$' + 4 + ',00' );

        }
document.getElementById("lista").appendChild(listaElement); 
}

Na hora clicar no botão "exibir Pedido" os pedidos não aparecem. Alguma ajuda?

1

1 Resposta 1

1

Não entendi essa volta toda se a única coisa que muda no texto do elemento criado é o nome do produto e o preço. Não precisa criar um nó de texto com o nome do produto porque ele já é armazenado no prompt.

Pra simplificar o código criei uma função que adiciona o nó de texto de acordo com o nome do produto.

Também havia alguns problemas com os for que esta usando, fazendo com que as variáveis index_itens e index_preços tivessem sempre o mesmo valor, ou seja, o tamanho das arrays aos quais elas referenciam, por isso nunca entrava em nenhum if.

Removi também o excesso de parenteses nos if's:

var itens_cardapio = ['Hamburger','Morango com chocolate','bolo','Brigadeiro','Mouse de limão','Suco de limão','H20'];
var preços = ['8','5','15','3','5','5','4'];
var index_itens;
var index_preços;
var Usuariopedido; 
var Usuariopedido2;
var itens;
 var soma;
 var Is;
 var Ip;
 var total;
 var resposta;
 Usuariopedido = [];
 total = []
 Usuariopedido2 = Usuariopedido;
 soma = 0;
 var preco;

function  preencher_Pedido() {

   var pedido = prompt("Digite seu pedido:");
   for(var c of itens_cardapio){
      itens = c;
      index_itens = itens_cardapio.indexOf(pedido);
   }
   if(pedido!= null|| pedido == itens){
      Usuariopedido2 = pedido;
   }
//   for(var p of preços){
      index_preços = index_itens;
//   }
}

function textNodes(no, obj){
   var preco = document.createTextNode(obj.produto + " " + obj.preco);
   no.appendChild(preco);
}

function exibirPedido() {

    var listaElement = document.createElement("LI");

        if(Usuariopedido2 == 'Hamburger' && index_itens == 0 && index_preços == 0){
             preco = 'R$8,00';
        }else if(Usuariopedido2 == 'Morango com chocolate' && index_itens == 1 && index_preços == 1){
             preco = 'R$5,00';
        }else if(Usuariopedido2 == 'bolo' && index_itens == 2 && index_preços == 2){
             preco = 'R$15,00';
        }else if(Usuariopedido2 == 'Brigadeiro' && index_itens == 3 && index_preços == 3){
             preco = 'R$3,00';
        }else if(Usuariopedido2 == 'Mouse de limão' && index_itens == 4 && index_preços == 4){
             preco = 'R$5,00';
        }else if(Usuariopedido2 == 'Suco de limão' && index_itens == 5 && index_preços == 5){
             preco = 'R$5,00';
        }else if(Usuariopedido2 == 'H20' && index_itens == 6 && index_preços == 6){
             preco = 'R$4,00';
        }
        
        textNodes(listaElement, {produto: Usuariopedido2, preco: preco});
         document.getElementById("lista").appendChild(listaElement); 
}
        <div id="cardápio" class="">
            <h1 id="cardapio-t">Cardápio</h1>
                <h2>Comida</h2>
            <ol>

                <li>Hámburger----------R$ 8,00</li>
                <li>Morango com chocolate----------R$ 5,00</li>
                <li>bolo----------R$15,00</li>
                <li>Brigadeiro----------R$3,00 </li>
                <li>Mouse de limão----------R$5,00</li>
            </ol>
                <h2>Bebida</h2>
                <ol>
                    <li>Suco de limão----------R$5,00</li>
                    <li>H20----------R$4,00</li>
                </ol>

    </div>

    <button onclick="preencher_Pedido()">prencher pedido</button>
    <button onclick="exibirPedido()" id="pedir">exibir Pedido</button>



    <div>
        <h1>Pedido</h1>
       <ul id="lista">

       </ul>


       <p>Total: <span id="valor"></span></p>
    </div>

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 .