Add "Input List" in Java Script

Navigation
2

I have some difficulties with JavaScript. I want to add some fields from my "Input List" and multiply others by clicking on a "Calculate Button", thus informing a value in an "Input Text". Nothing else I do has worked, please if anyone can help me. 

    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>
    
asked by anonymous 08.07.2015 / 08:11

1 answer

2

I would do it another way ... you should take into account that having the right HTML already when it comes from the server makes JavaScript much easier.

I suggest using select instead of datalist . select is made for this type of options / use, datalist is thought for other purposes and it is difficult to read value and innerHTML of datalist selected.

If you put in HTML a reference about which select is the multiplier of another this facilitates a lot too. Placing the price on the value is also practical. If you need to know the product description on the server I suggest use a JSON in value this way .

Hence I suggest this code I give in the example below. The main differences is to use select instead of datalist and use a 'data-rel =' field where I place the select ID that should be multiplied by this selection. 

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: link

    
08.07.2015 / 10:40
Purpose of a WebService Inherit element text