Показать сообщение отдельно
  #3 (permalink)  
Старый 14.06.2017, 12:23
ZMA ZMA вне форума
Новичок на форуме
Отправить личное сообщение для ZMA Посмотреть профиль Найти все сообщения от ZMA
 
Регистрация: 09.06.2017
Сообщений: 8

рони, опции созданы теперь отдельно.

Но в коде что-то не так.
Предполагается, что пользователь вводит 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>
Ответить с цитированием