Форум

ZMA · #1 (**permalink**) 09.06.2017, 18:19

Добрый день.

Создан раскрывающийся список средствами JS:

var CheckColor = function myPrice() {
    var x = document.createElement("SELECT");
    x.setAttribute("id", "mySelect");
    document.body.appendChild(x);
 
    var z = document.createElement("option");
    z.setAttribute("color", "green");
    var t = document.createTextNode("Зеленый");
    z.appendChild(t);
    document.getElementById("mySelect").appendChild(z);
    
     var z = document.createElement("option");
    z.setAttribute("color", "red");
    var t = document.createTextNode("Красный");
    z.appendChild(t);
    document.getElementById("mySelect").appendChild(z);
    
    var z = document.createElement("option");
    z.setAttribute("color", "blue");
    var t = document.createTextNode("Синий");
    z.appendChild(t);
    document.getElementById("mySelect").appendChild(z);
    
}

Далее будет функция, которая считает стоимость в зависимости от введенной площади, исходя из цены 1кв.м. Но стоимость 1 кв.м. разная, зависит от выбранного цвета.

Как можно обратиться к атрибуту с цветом из другой функции - направьте, пожалуйста.

рони · #2 (**permalink**) 09.06.2017, 18:37

ZMA,
а создать нормальный option никак?

ZMA · #3 (**permalink**) 14.06.2017, 12:23

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

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

рони · #4 (**permalink**) 14.06.2017, 13:13

ZMA,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
  window.addEventListener('DOMContentLoaded', function() {
  var options = [
      {
       value: 1,
       text: 'красный'
       },
       {
       value: 1.2,
       text: 'зеленый'
       },
       {
       value: 2.5,
       text: 'синий'
       }
       ];

 function createOption(obj) {
    return new Option(obj.text, obj.value)
}

function createSelect(obj) {
    var select = document.createElement("select");
    select.id = "mySelect";
    obj.forEach(function(option) {
        select.appendChild(createOption(option))
    });
    return form.insertBefore(select, output)
}

function calculate() {
    var h = +height.value || 0,
        w = +width.value || 0,
        c = +select.value;
    h < 0 && (h = 0);
    w < 0 && (w = 0);
    h = h * w;
    h <= .4 && (c *= 1.1);
    h *= c;
    output.innerHTML = h.toFixed(2)
}
var form = document.querySelector("#form"),
    output = document.querySelector("#output"),
    width = document.querySelector("#width"),
    height = document.querySelector("#height"),
    select = createSelect(options);

form.addEventListener("input", calculate);
form.addEventListener("change", calculate);

      });
  </script>
</head>

<body>
<form action="" id="form" >
    <input type="text" id="height">
    <input type="text" id="width">
    <p id="output"></p>
</form>


</body>
</html>

ZMA · #5 (**permalink**) 14.06.2017, 13:37

рони, спасибо огромнейшее.

ZMA · #6 (**permalink**) 15.06.2017, 12:05

рони, можно еще вопрос.
Пытаюсь добавить, чтобы при вводе числа меньше min/max, автоматом происходила замена на min/max число. Причем на w и h min и max разные.
добавляю replace var h= +height.value.replace(/\D/g,'')||0; , if'ы <>, onblur/onchange в input, но безрезультатно.

Dilettante_Pro · #7 (**permalink**) 15.06.2017, 12:58

ZMA,
Вот же у вас проверка на min

h < 0 && (h = 0);
w < 0 && (w = 0);

Поставьте вместо нулей нужные значения min
Аналогично и по max.
Ну и исправить в инпутах

height.value = h.toString();
width.value  = w.toString();

ZMA · #8 (**permalink**) 15.06.2017, 13:04

Dilettante_Pro, к сожалению, это ограничивает только расчет.
Т.е., если вы установите max 200, а значение будет введено 305, то посчитается как 200, но значение пользователь так и будет видеть 305.
Хотелось бы, чтобы 305 менялось на 200 (установленный max) автоматически.

Dilettante_Pro · #9 (**permalink**) 15.06.2017, 13:14

h < 10 && (h = 10);
w < 20 && (w = 20);
h > 200 && (h = 200);
w > 250 && (w = 250);
height.value = h.toString();
width.value  = w.toString();

Только обработчик на input лучше убрать - не даст ввести изменения в случае ошибки

Dilettante_Pro · #10 (**permalink**) 15.06.2017, 13:18

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
  window.addEventListener('DOMContentLoaded', function() {
  var options = [
      {
       value: 1,
       text: 'красный'
       },
       {
       value: 1.2,
       text: 'зеленый'
       },
       {
       value: 2.5,
       text: 'синий'
       }
       ];

 function createOption(obj) {
    return new Option(obj.text, obj.value)
}

function createSelect(obj) {
    var select = document.createElement("select");
    select.id = "mySelect";
    obj.forEach(function(option) {
        select.appendChild(createOption(option))
    });
    return form.insertBefore(select, output)
}

function calculate() {
    var h = +height.value || 0,
        w = +width.value || 0,
        c = +select.value;
    h < 10 && (h = 10);
    w < 20 && (w = 20);
    h > 200 && (h = 200);
    w > 250 && (w = 250);
    height.value = h.toString();
    width.value  = w.toString();
    h = h * w;
    h <= 400 && (c *= 1.1);
    h *= c;
    output.innerHTML = h.toFixed(2)
}
var form = document.querySelector("#form"),
    output = document.querySelector("#output"),
    width = document.querySelector("#width"),
    height = document.querySelector("#height"),
    select = createSelect(options);

// form.addEventListener("input", calculate);
form.addEventListener("change", calculate);

      });
  </script>
</head>

<body>
<form action="" id="form" >
    <input type="text" id="height">
    <input type="text" id="width">
    <p id="output"></p>
</form>


</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript