JS. Функция для изменения ширины и высоты Diva

195

30 июня 2018, 20:40

В поля(инпуты) вводится высота и ширина, и блок должен тут же менять ширину и высоту, но оставаться в нужных пределах (250 на 250).

То есть, если заданы параметры 250 - 200, то блок будет 250px на 200px. Если заданы параметры 500 на 100, то блок будет 250px на 50px (все пропорции уменьшатся в 2 раза, чтобы поместиться).

Написал код, но он не работает, при некоторых значениях блок явно вылазит за пределы. Я не могу понять в чем дело.

Например когда вводишь значение 999 на 250 - все окей (блок становится 250 на 65) А когда 1000 на 250 - все летит к....

function onlinechanger(){ 
 
var lenghtpaper = $('#lenghtpaper').val(); 
var tollpaper = $('#tollpaper').val(); 
 
document.getElementById('lengthres').innerHTML = lenghtpaper; 
document.getElementById('tollres').innerHTML = tollpaper; 
 
if (lenghtpaper > 250 || tollpaper > 250) { 
	var chang = lenghtpaper > tollpaper ? lenghtpaper : tollpaper; 
	var coef = 250 / chang; 
	lenghtpaper = Math.round(lenghtpaper*coef); 
	tollpaper = Math.round(tollpaper*coef); 
} 
 
$("#viziblock").css({'width': lenghtpaper, 'height' : tollpaper}); 
 
}

#viziblock {background: #fff; border: 1px solid #000; width: 250px; height: 250px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div class="generalcalc"> 
       <form onsubmit="return false;"> 
         <div class="income"> 
				<div>Длина </div> 
              <input id="lenghtpaper" type="number" oninput="onlinechanger()" value="250"> 
				<div>Высота </div> 
              <input id="tollpaper" type="number" oninput="onlinechanger()" value="250"> 
            </div> 
           
            <div class="resultraschet">Результаты расчета</div> 
            <div class="resume"> 
				<div class="lengthres">Длина: <output id="lengthres"></output> </div> 
				<div class="tollres">Высота: <output id="tollres"></output></div> 
            </div> 
			 
			<div id="viziblock"></div> 
 
    </form> 
    </div>

Answer 1

Проблема в том, что

console.log("250" > "1000") // true

Приведите длину и высоту к числу, прежде чем их сравнивать:

function onlinechanger(){ 
  var lenghtpaper = parseInt($('#lenghtpaper').val()); 
  var tollpaper = parseInt($('#tollpaper').val()); 
 
  document.getElementById('lengthres').innerHTML = lenghtpaper; 
  document.getElementById('tollres').innerHTML = tollpaper; 
 
  if (lenghtpaper > 250 || tollpaper > 250) { 
    var chang = lenghtpaper > tollpaper ? lenghtpaper : tollpaper; 
    var coef = 250 / chang; 
    lenghtpaper = Math.round(lenghtpaper*coef); 
    tollpaper = Math.round(tollpaper*coef); 
  } 
 
  $("#viziblock").css({'width': lenghtpaper, 'height' : tollpaper}); 
 
}

#viziblock {background: #fff; border: 1px solid #000; width: 250px; height: 250px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div class="generalcalc"> 
   <form onsubmit="return false;"> 
     <div class="income"> 
      <div>Длина </div> 
          <input id="lenghtpaper" type="number" oninput="onlinechanger()" value="250"> 
      <div>Высота </div> 
          <input id="tollpaper" type="number" oninput="onlinechanger()" value="250"> 
     </div> 
 
     <div class="resultraschet">Результаты расчета</div> 
     <div class="resume"> 
      <div class="lengthres">Длина: <output id="lengthres"></output> </div> 
      <div class="tollres">Высота: <output id="tollres"></output></div> 
     </div> 
 
  <div id="viziblock"></div> 
</form> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

Все популярные вопросы

Как установить модульную систему AMD?

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

157

javascript

Slick slider настроить автоматическую прокрутку?

У slick слайдера если количество элементов меньше или столько же сколько должно отображаться, то скрываются стрелки и перестает работать автоматическая...

208

javascript

Блокировать повторный вызов alert javascript [дубликат]

На данный вопрос уже ответили:

175

javascript

Работа JS на ХР в хроме

возникла проблемаПроверял на всех браузерах работу css и js, все работает,без глюков, все картинки подгружаются, в Сафари есть кое-какие глюки,но...

176