JSFiddle - React, Tailwind, and code Playground
HTML
<form action="" id="form">
<input type="number" id="square">
<input type="submit" value="рассчитать">
</form>
JavaScript
var options = [
{
value: 'red',
coefficient: 1,
text: 'красный' >'sds'
},
{
value: 'green',
coefficient: 1.2,
text: 'зеленый'
},
{
value: 'blue',
coefficient: 2.5,
text: 'синий'
},
];
function createOption(obj) {
var option = document.createElement('option');
var text = document.createTextNode(obj.text);
option.appendChild(text);
option.value = obj.value;
option.dataset.coefficient = obj.coefficient;
return option;
}
function createSelect(obj) {
var select = document.createElement('select');
select.id = 'mySelect';
obj.forEach(function(option) {
select.appendChild(createOption(option));
});
document.body.appendChild(select);
}
function calculate(square, coefficient) {
return square * coefficient;
}
createSelect(options);
document.getElementById('form').addEventListener('submit', function(e){
e.preventDefault();
var square = document.getElementById('square').value;
var select = document.getElementById('mySelect');
var coefficient = select.options[select.selectedIndex].dataset.coefficient;
alert('Цена: ' + calculate(square, coefficient));
});