Add "Input List" in Java Script

Question

I’m having some difficulties with Javascript. I want to add some fields of 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 out, 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>

Answer 1

I would do it in another way... you should bear in mind that having the right HTML already when it comes from the server makes the Javascript part much easier.

I suggest using select in time of datalist. The select is made for this type of options/use, the datalist is designed for other purposes and it is difficult to read the value and the innerHTML of datalist selected.

If you put in the HTML a reference about that select is the multiplier of other that makes it much easier too. Putting the price in value is also practical. If you need to know the product description on the server I suggest use a JSON in value in this way.

So I suggest this code that I give in the example below. The main differences are to use select at a time of datalist and use a field `data-rel="" where I place the ID of the select which must 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: http://jsfiddle.net/gu0001kj/