2

Estou com algumas dificuldades em JavaScript. Eu desejo somar alguns campos do meu "Input List" e multiplicar outros ao clicar em um "Botão Calcular", assim informando um valor em um "Input Text". Mais nada do que faço tem dado certo, por favor se alguém puder me ajudar.

    Preço:
    <input type="text" name="preco"><br />
    <button>Comprar</button>

    <form id="pizza3">
        <p>Tamanho da Pizza:</p>
        <input list="tmhpizza" name="tmhpizza" required />
            <datalist id="tmhpizza">
            <option value="Brotinho">R$20,00</option>
            <option value="Pequena">R$45,00</option>
            <option value="Média">R$70,00</option>
            <option value="Grande">R$95,00</option>
            <option value="Gigante">R$120,00</option>
            </datalist>
        <p>Quantidade de Pizzas:</p>
        <input list="qntpizza" name="qntpizza" required />
            <datalist id="qntpizza">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            </datalist>
        <p>Tamanho do Refrigerante:</p>
        <input list="tmhrefri" name="tmhrefri" required />
            <datalist id="tmhrefri">
            <option value="350ml">R$4,50</option>
            <option value="750ml">R$6,30</option>
            <option value="1L">R$8,10</option>
            <option value="2L">R$9,90</option>
            <option value="2,5L">R$11,70</option>
            </datalist>
        <p>Quantidade de Refrigerante:</p>
        <input list="qntrefri" name="qntrefri" required />
            <datalist id="qntrefri">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            </datalist><br />
    <input type="button" name="voltar" value="Voltar" />
    <button>Calcular</button>
2
  • Podes colocar o código que fizeste? como estás a gerar esse HTML? dá para adicionar informação no HTML ou já o recebes "feito" e não podes alterar?
    – Sergio
    Commented 8/07/2015 às 6:32
  • Usar datalist complica um bocado, um select seria melhor pois o datalist não tem por exemplo selectedIndex e é dificil tirar o innerHTML. Se responderes às minhas duvidas em cima posso ajudar-te melhor.
    – Sergio
    Commented 8/07/2015 às 7:04

1 Resposta 1

2

Eu faria isso de outra maneira... deves ter em conta que tendo o HTML certo já quando vem do servidor facilita muito a parte de JavaScript.

Eu sugiro usar select em vêz de datalist. O select é feito para este tipo de opções/uso, o datalist é pensado para outros fins e é dificil ler o value e o innerHTML do datalist selecionado.

Se colocares no HTML uma referência sobre que select é o multiplicador de outro isso facilita muito também. Colocar o preco no value também é prático. Se precisares saber a descição do produto no servidor sugiro usares um JSON no value desta maneira.

Daí que sugiro este codigo que dou no exemplo em baixo. As principais diferênças é usar select em vêz de datalist e usar um campo `data-rel="" onde coloco o ID do select que deve ser multiplicado por esta seleção.

var calcular = document.getElementById('calcular');
calcular.addEventListener('click', function () {
    var selects = document.querySelectorAll('select[data-rel]');
    var precos = [].map.call(selects, function (select) {
        var multiplicador = parseInt(select.value, 10);
        var precoProduto = document.getElementById(select.dataset.rel).value;
        return parseFloat(precoProduto) * multiplicador;
    });
    document.querySelector('input[name="preco"]').value = precos.reduce(function (a, b) {
        return a + b;
    }, 0);
});
div {
    padding: .5em;
}
<form id="pizza3">
        <p>Tamanho da Pizza:</p>
        <select id="tmhpizza">
            <option value="20">Brotinho - R$20,00</option>
            <option value="45">Pequena - R$45,00</option>
            <option value="70">Média - R$70,00</option>
            <option value="95">Grande - R$95,00</option>
            <option value="120">Gigante - R$120,00</option>
        </select>
        <p>Quantidade de Pizzas:</p>
        <select id="qntpizza" data-rel="tmhpizza">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
        <p>Tamanho do Refrigerante:</p>
        <select id="tmhrefri">
            <option value="4.5">350ml - R$4,50</option>
            <option value="6.3">750ml - R$6,30</option>
            <option value="8.1">1L - R$8,10</option>
            <option value="9.9">2L - R$9,90</option>
            <option value="11.7">2,5L - R$11,70</option>
        </select>
        <p>Quantidade de Refrigerante:</p>
        <select id="qntrefri" data-rel="tmhrefri">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
        <p>Preço:</p>
        <input readonly="true" id="total" type="text" name="preco">
        <p>
            <button type="button" id="calcular">Calcular</button>
            <button type="submit">Comprar</button>
            <button type="button">Voltar</button>
        </p>
    </form>

jsFiddle: http://jsfiddle.net/gu0001kj/

5
  • Ficou ótimo, mas infelizmente não posso utilizar Jquery no meu código, isso que tem dificultado tudo. Commented 8/07/2015 às 16:45
  • @LarissaMourullo não há jQuery na minha resposta...
    – Sergio
    Commented 8/07/2015 às 16:54
  • Consegui fazer pegar o código, mas ele só funciona se eu colocar a tag script no final da página, e preciso seguir as regras da W3C que impede de fazer isso. Você saberia dizer porque? Commented 8/07/2015 às 18:37
  • @LarissaMourullo não tem mal colocar o script no final do body. Se quiseres colocar no head podes usar window.onload = function(){ ...codigo...}.
    – Sergio
    Commented 8/07/2015 às 22:59
  • @LarissaMourullo vi que fizeste uma pergunta sobre colocar o código na head. A resposta do Zuul é excelente, bem aceite.
    – Sergio
    Commented 8/07/2015 às 23:10

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 .