рони, опции созданы теперь отдельно.
Но в коде что-то не так.
Предполагается, что пользователь вводит 2 значения: высота и ширина. Считается автоматом, без клавиши submit.
Также хотелось бы добавить доп. функцию: при вводе пользователем размера площадью <= 0,4 кв.м. к coefficient автоматом прибавляется 10%. Как понимаю, через через дополнительный if, куда вставить, подскажите.
Кто может, проверьте, помогите, пожалуйста.
var options = [
{
value: 'red',
coefficient: 1,
text: 'красный'
},
{
value: 'green',
coefficient: 1.2,
text: 'зеленый'
},
{
value: 'blue',
coefficient: 2.5,
text: 'синий'
},
];
var output = $('#output');
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(height, width, coefficient) {
return height * width * coefficient;
}
createSelect(options);
$('#height, #width, #coefficient').on('keyup', function(){
var height = $('#height').val() * 1;
var width = $('#width').val() * 1;
var select = document.getElementById('mySelect');
var coefficient = select.options[select.selectedIndex].dataset.coefficient;
if(!isNaN(height) && !isNaN(width)){
output.html('Цена: ' + calculate(height * width* coefficient).toFixed(2) + ' руб.');
} else {
output.html('Не верный формат!');
}
});
<form action="" id="form">
<input type="text" id="height">
<input type="text" id="width">
<ul id="output"></ul>
</form>