Как пересчитать величину в зависимости от выбранной единицы измерения?

Question

[akula22]

Есть 3 поля, ширина высота и выбор единицы измерения( мм, см, метр)
как при изменения ед. изм. менять значения в ширине и высоте? (подгонять под выставленный размер).
математика понятна, а вот не пойму как скрипту объяснить с какой единицы меняем?
если из мм в см / 10 из мм в м - /1000 и тд....

Answer 1

[hzzzzl]

всё хратить в миллиметрах, и уже при отображении типа

shirina = 1000   // в скрипте храним значение в мм, 1000 мм

if (selected == "metr") {
  shirinaKotorujuPishemNaSajte = shirina / 1000 // в метре 1000 мм
}

Comments

[akula22]

хорошо, но shirinaKotorujuPishemNaSajte она же меняется, допустим из см превратили ее в метры
а когда превращаем в мм, мы же берем из поля shirinaKotorujuPishemNaSajte и ее умножаем/делим?

у меня по умолчанию стоит см ширина=100
$('#width').val() // 100

[hzzzzl]

ну в общем я имел в виду так
https://codepen.io/anon/pen/ZPZmao
но еще на инпут повесить слушатель, который при смене числа в инпуте будет также смотреть на значение селекта, и переводить в мм

upd:
https://codepen.io/anon/pen/ZPZmao

[akula22]

hzzzzl, дико извиняюсь, я копирую этот код, у меня все в ошибках, чего не хватает? у меня только Juqery подключен

[hzzzzl]

akula22, тут даже jquery нет :)
какие ошибки пишет?
на codepen работает ведь, да?

[akula22]

hzzzzl, Uncaught TypeError: Cannot read property 'addEventListener' of null

[akula22]

и в пхп сторм редакторе все красное, якобы код неверный

[hzzzzl]

Uncaught TypeError: Cannot read property 'addEventListener' of null
ну это наверняка потому что у элементов другой id, отличный от моего input id="w" value="500"

про пхпсторм не знаю, потому что должно работать :)

[akula22]

Помогите плз с моим кодом соеденить, у меня на инпут и на селект запускается одна функция
'onchange' => 'getData()'
ниже сама функция

$sz = $("#wide-selectsize").val();  //   тут id  выбранной ед. изм  (0=мм, 1=см, 2=метр)
$width = $('#wide-width').val(); //  поле инпута с шириной

    if($sz == 0) {
        $('#wide-width').val($width *10);
    }
    if($sz == 1) {
        $('#wide-width').val($width / 10);   
    }
    if($sz == 2) {
        $('#wide-width').val($width / 100);
  }

это работает пока на метры не переключу, потом сбивается и считает не правильно, у вас тут второй листенер, я не понимаю как его сюда воткнуть

[hzzzzl]

akula22, ой ну так сложно сказать, можно сразу кусок не до конца работающего кода на том же codepen?

идея такая, что слушать change на инпуте

$('#wide-width').on('change', function() {
  val = $("#wide-selectsize").val();  //   тут id  выбранной ед. изм  (1=мм, 2=см, 3=метр)

  // а дальше как у меня
  if(val == 1) {
    // мм -> см
    $('#wide-width').val($width* 10);
  } else if (val == 2) {
    // см -> см ничего не переводим
    $('#wide-width').val($width);  
  } else if (val == 3) {
    // м-> см
    $('#wide-width').val($width / 100);
  }
})

и вот тут уже могут быть ошибки, я не очень по jquery

[akula22]

не, не работает, ваш код на codepen можно сделать чтобы по умолчанию ширина стояла 100 и в см. ? Я переделываю и меня при первом изменение ничего не меняет, только потом %\

[akula22]

ставлю по дефолту 100 и см, меняю на мм и ничего не меняется

[akula22]

уф..вроде у меня полуичлось )) переписал под jquery

[hzzzzl]

akula22,
тогда вроде так
https://codepen.io/anon/pen/pYBXve

да там не сложно, только эти нолики туда-обратно переводить :D
поэтому по мне так лучше хранить в самой маленькой единице то есть в мм, чтобы в одном месте только умножать, а в другом месте только делить

[akula22]

нет, рано обрадовался, если руками изменить на 10 начинает криво считать у меня, все из-за того что изначально у меня стоит СМ!

[akula22]

hzzzzl, спасибо, сейчас попробую под себя переписать