Expected text is not displayed

Asked

Viewed 58 times

1

I made the following program to create a restaurant system that has a menu and the user entering their orders.

HTML code:

<!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>

Javascript code:

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); 
}

When you click on the "Show Order" button, the orders do not appear. Some help?

javascript html css

  • Have you tried bootstrap ? collapce is simple and you can configure it. https://getbootstrap.com/docs/4.0/components/collapse/

1 answer

1

I did not understand this whole revolution if the only thing that changes in the text of the created element is the name of the product and the price. No need to create a text node with the product name because it is already stored at the prompt.

To simplify the code I created a function that adds the text node according to the product name.

There were also some problems with the for you are using, causing the variables index_itens and index_preços always had the same value, that is, the size of the arrays to which they refer, so never entered any if.

I also removed the excess of parentheses in the 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>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.