набросок основы для калькулятора

by Denis Tverdokhlebov

HTML

<select id="selectOption">
  <option disabled selected value> -- Выбирите значение -- </option>
  <option>Пункт One</option>
  <option>Пункт Two</option>
  <option>Пункт Three</option>
</select>

<input type="text" id="metre" placeholder="пояснение">
<input type="text" id="end_price" placeholder="значения не введены" disabled>
<div id="calculation">Расчитать</div>

CSS

#calculation {
  background-color: green;
  padding: 10px 30px;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 150px;
  margin: 10px 0;
  color: #ffffff;
  cursor: pointer;
}

input#end_price::-moz-placeholder,
input#metre::-moz-placeholder{
  text-align: center;
}

input#end_price::-webkit-input-placeholder,
input#metre::-webkit-input-placeholder{
  text-align: center;
}

input#end_price:-ms-input-placeholder,
input#metre:-ms-input-placeholder {
  text-align: center;
}

input#end_price::-ms-input-placeholder,
input#metre::-ms-input-placeholder {
  text-align: center;
}

input#end_price::placeholder,
input#metre::placeholder {
  text-align: center;
}

JavaScript

$(function() {
  //при смене option
  /*   $("#selectOption").change(function() {
      var obj1 = '10';
      var obj2 = '20';
      var obj3 = '30';
    
      var str = "";
      var result = $("#end_price");
      var temporarily = "";
      var valMetre = $("#metre").val();
      var valOption = $("#selectOption").val();
    
      $("#selectOption option:selected").each(function() {    
        str += $(this).text();
      });
    
      if (str == 'Пункт One') {
        temporarily = valMetre / obj1;
        result.attr("placeholder", Math.ceil(temporarily));
      }
      if (str == 'Пункт Two') {
        temporarily = valMetre / obj2;
        result.attr("placeholder", Math.ceil(temporarily));
      }
      if (str == 'Пункт Three') {
        temporarily = valMetre / obj3;
        result.attr("placeholder", Math.ceil(temporarily));
      }
    }); */

  $('#calculation').on("click", function() {

    var obj1 = '10';
    var obj2 = '20';
    var obj3 = '30';

    var btn = $("#calculation");
    var str = "";
    var result = $("#end_price");
    var temporarily = "";
    var valMetre = $("#metre").val();
    var valOption = $("#selectOption").val();

    $("#selectOption option:selected").each(function() {    
      str += $(this).text();
    });

    if (str == 'Пункт One') {
      temporarily = valMetre / obj1;
      result.attr("placeholder", Math.ceil(temporarily));
    }
    if (str == 'Пункт Two') {
      temporarily = valMetre / obj2;
      result.attr("placeholder", Math.ceil(temporarily));
    }
    if (str == 'Пункт Three') {
      temporarily = valMetre / obj3;
      result.attr("placeholder", Math.ceil(temporarily));
    }

  });
});