Multiply selection of select and data from input

Question

Guys, please tell me how to implement such a thing, there is 1 select and 1 input there number, when you select something from the select and enter the number in the input, for example, when you select a banana, the banana price multiplies by the quantity, and the result is displayed slightly lower

<form> <select> <option value="Banan">Банан</option> <option value="Apple">Яблоко</option> <option value="Pear">Груша</option> <option value="Grapes">Виноград</option> </select> <input type="number" value="amount" min="1" max="50" step="1" placeholder="Укажите предположительное количество (кг)"> </form> <div>Здесь результат умножения</div>

Formulate the right question, nothing is clear! Where is the price, where is the quantity? - Ihor Tkachuk

Sasha Omelchenko Sasha Omelchenko 10.9k four 20 52 · Answer 1 · 2017-01-11T14:46:24

In order not to upset the teacher of mathematics and not to multiply kilograms by bananas, you must still add the price to each option, and then multiply.

 var fruit = document.getElementById('fruit'), weight = document.getElementById('weight'), result = document.getElementById('result'); fruit.addEventListener('change', function() { listener(fruit); }); weight.addEventListener('change', function() { listener(fruit); }); function listener(elem) { var price = elem.querySelector(':checked').getAttribute('data-price'), kg = weight.value; result.innerHTML = multiply(price, kg); } function multiply(a, b) { return a * b; }

 <form> <select id="fruit"> <option value="Banan" data-price="100" selected>Банан</option> <option value="Apple" data-price="150">Яблоко</option> <option value="Pear" data-price="200">Груша</option> <option value="Grapes" data-price="250">Виноград</option> </select> <input id="weight" type="number" value="amount" min="1" max="50" step="1" placeholder="Укажите предположительное количество (кг)"> </form> <div id="result">Здесь результат умножения</div>

C.Raf.T C.Raf.T 3,954 one 6 nineteen · Answer 2 · 2017-01-11T14:32:23

 function mkChange(item) { var kg = document.getElementById('kg').value; document.getElementById('total').innerHTML = item.value * kg; }; function mkChange1(item) { var select = document.getElementById("mk"); var fruct = select.options[select.selectedIndex].value; document.getElementById('total').innerHTML = item.value * fruct; };

 <form> <select id="mk" onchange="mkChange(this);"> <option value="10">Банан - 10p</option> <option value="20">Яблоко - 20p</option> <option value="30">Груша - 30p</option> <option value="40">Виноград - 40p</option> </select> <input type="number" id="kg" value="0" min="1" max="50" step="1" placeholder="Укажите предположительное количество (кг)" onkeyup="mkChange1(this);" onchange="mkChange1(this);"> </form> <div>Здесь результат умножения: --- <span id="total">00</span>p</div>

Moonvvell moonvvell 1,666 one ten 18 · Answer 3 · 2017-01-11T14:35:33

 calculate = function() { var e = document.getElementsByTagName("select")[0]; var price = e.options[e.selectedIndex].attributes['data-price'].value; var amount = document.getElementsByTagName("input")[0].value; var fullprice = parseInt(price) * parseInt(amount); document.getElementById("results").innerText = fullprice; }

 <form> <select onchange=calculate()> <option value="Banan" data-price="2">Банан</option> <option value="Apple" data-price="3">Яблоко</option> <option value="Pear" data-price="4">Груша</option> <option value="Grapes" data-price="5">Виноград</option> </select> <input onchange=calculate() type="number" value="amount" min="1" max="50" step="1" placeholder="Укажите предположительное количество (кг)"> </form> <div id="results">Здесь результат умножения</div>

Multiply selection of select and data from input

3 answers 3

More articles: