Форум

Enkille · #1 (**permalink**) 03.05.2016, 23:10

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

Итак есть функция (откуда брать число, куда вписывать число на странице и название данного расчета:

function doCalc(inputDiv, resultDiv, resultName){
  var value;
  $(inputDiv).on("change", function (){
    value = Number($(this).val());
    $(resultDiv).text(resultName +": "+ value + " cm");
  }).change();
}

Вызываем:

doCalc("#input-width", "#width-result", "Ширина");
doCalc("#input-height", "#height-result", "Высота");

Так все работает - функция меняет в нужном месте цифру при изменении инпута.

Не могу сообразить как мне, например, сложить эти функции? Сейчас функция мне отдает undefined, даже если я получаю значение внутри функции, вывожу его на внешнюю переменную.

Или вот так, например не работает:

var width = doCalc(....);
var height = doCalc(....);
console.log(width + height);

рони · #2 (**permalink**) 03.05.2016, 23:18

Enkille,

function doCalc(inputDiv, resultDiv, resultName){
  var value;
  value = Number($(inputDiv).val());
  $(resultDiv).text(resultName +": "+ value + " cm");
  return value
}

Enkille · #3 (**permalink**) 03.05.2016, 23:22

Сообщение от рони

Enkille,

function doCalc(inputDiv, resultDiv, resultName){
  var value;
  value = Number($(inputDiv).val());
  $(resultDiv).text(resultName +": "+ value + " cm");
  return value
}

...... update

невероятно, но сделал. Тупил два вечера, что-то там куралесил неподетски, а нужно было просто вернуть value, а каждой функции вызываемой с нужными параметрами приписать к переменной, а переменные сложить = работает

рони · #4 (**permalink**) 03.05.2016, 23:36

Enkille,

<!DOCTYPE html>

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

 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

</script>
  <script>
 $(function(){
function doCalc(inputDiv, resultDiv, resultName){
  var value;
  value = Number($(inputDiv).val())||0;
  $(resultDiv).text(resultName +": "+ value + " cm");
  return value
}
function sum()
{
var width = doCalc("#input-width", "#width-result", "Ширина");
var height = doCalc("#input-height", "#height-result", "Высота");
$("p").text(width + height);
}
$("input").on({"input" : sum});
sum()

   })
  </script>
</head>

<body> <p></p>
  <input type="text" id="input-width" value="10" ><div id="width-result"></div>
  <input type="text" id="input-height" value="23"><div id="height-result"></div>
</body>
</html>

aklis · #5 (**permalink**) 04.05.2016, 00:06

Мне кажется или в таких делах всякие jQuery только помеха?

Подбешивать стал уже этот фреймворк если честно, хотя я не могу оформить внятно причину этого...

Enkille · #6 (**permalink**) 04.05.2016, 00:21

Сообщение от aklis

Мне кажется или в таких делах всякие jQuery только помеха?

Подбешивать стал уже этот фреймворк если честно, хотя я не могу оформить внятно причину этого...

Я не против чистого JS. Но познакомившись с jquery мне показалось намного проще с ним и быстрее, чем писать все то же самое на JS.

Enkille · #7 (**permalink**) 07.05.2016, 00:02

Попытался дописать самостоятельно функцию, но уже несколько часов сижу и туплю над некоторыми моментами, подскажите кто может как это сделать. Честно гуглил и перепробовал все что мог. И думаю нашел то что надо, правда не знаю как это применить в моем случае. Вот например: http://api.jqueryui.com/selectmenu/#event-select и вот http://stackoverflow.com/a/26697847/6227306

Есть немного измененная функция, которую мне очень вежливо поправил Рони, за что ему огромный респект.

$(function() {
  function doCalc(inputDiv, resultDiv, resultName){
    var value;
    value = Number($(inputDiv).val()) || 0;
    $(resultDiv).text(resultName + ": " + value + " cm");
    return (value / 100);
  }

  function sum(){
    var width = doCalc("#input-width", "#width-result", "Ширина");
    var height = doCalc("#input-height", "#height-result", "Высота");
    $("#result").text( Math.round(((width * height) * 0.4) + (width * height) * MODEL) + " kg" );
  }
   
  $("input").on({
    "input": sum
  });
  sum();
});

И есть функция jQuery UI Selectmenu, которую я использую для оформления select>option. При загрузке страницы она скрывает реальные select>option и имплементирует список на основе ul>li, в связи с чем я не могу получить спокойно value этого списка, чтобы закончить расчет в первой функции.

(width * height) * 0.4) + (width * height) * MODEL)

В этом случае MODEL == value (option value="9" например).

Помогите доделать скрипт, я почти уже у финиша для его завершения, но завис конкретно.

Вот код jquery ui:

$(function () {
  $.widget("custom.iconselectmenu", $.ui.selectmenu, {
    _renderItem: function (ul, item) {
      var li = $("<li>", {
        text: item.label
      });
      
      if (item.disabled) {
        li.addClass("ui-state-disabled");
      }      

      $("<span>", {
          style: item.element.attr("data-style"),
          "class": "ui-icon " + item.element.attr("data-class")
        })
        .appendTo(li);

      return li.appendTo(ul);
    }
  });
  
  $("#modello")
    .iconselectmenu()
    .iconselectmenu("menuWidget")
    .addClass("ui-menu-icons customicons");
});

И на всякий случай так выглядит список:

<select class="state" name="modello" id="modello">
  <option value="4.5" data-class="pvc-45">PVC 4,5 Kg</option>
  <option value="6" data-class="pvc-60">PVC 6 Kg</option>
</select>

Мне нужно вернуть как значение value так и значение самого элемента option чтобы встроить его в нужный див на странице.

Форум

Справочник

Discord чат

Курсы javascript