проблема js с if после того, как значение становится 1000

#javascript

Вопрос:

Итак, я создал скрипт, чтобы изменить вторую цену (пример 2.1) и третью цену (пример 210) некоторых полей ввода html.

идентификаторы полей следующие:

 first input id = a1  
Second input id = doesn't matter   
Third input id = a2   
Fourth input id = a3

Первый ввод — это количество, третий — цена / единица, а четвертый — общая цена.

Кажется, все работает нормально, пока a1 = 1000 . По какой-то причине, когда это происходит, цена a2 получает x=0 значение, и это похоже a1 = 100 на until a1 = 2000 и так далее.
Я не уверен, имеет ли смысл то, что я говорю.

 $qty = {  "0": "100",  "2": "200",  "3": "400",  "4": "600",  "5": "800"};
$price_per_unit = {  "0": "2",  "2": "1.8",  "3": "1.6",  "4": "1.4",  "5": "1.2"};


let arrayppu = Object.values($price_per_unit);
let arrayqti = Object.values($qty);

$("#a1").change(function() {

  let qty = document.getElementById('a1').value;

  for (let x = 0; x < arrayqti.length; x  ) {
    if (qty === arrayqti[x] || qty > arrayqti[x]) {
      document.getElementById('a2').value = arrayppu[x];
      document.getElementById('a3').value = (qty * arrayppu[x]).toFixed(2);
    }
  }
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="a1" step='100' />A1<br>
<input type="text" id="a2" />A2<br>
<input type="text" id="a3" />A3<br>

1. Я сделал вам фрагмент — какой ожидаемый результат и какой фактический результат вас не устраивает?

2. Хорошо, проверьте снип прямо сейчас, пока не достигнете 1000, я отредактировал его, чтобы иметь правильные значения, и добавил шаг 100. Когда вы достигнете 1000, a2 = 2 вместо оставшихся 1,2 @mplungjan

Ответ №1:

Вам нужно, чтобы ваше количество было целыми числами, а не СТРОКАМИ

«800» > «1000»

 const arrayqti = [100, 200, 400, 600, 800];
const arrayppu = [2.0, 1.8, 1.6, 1.4, 1.2];

$("#a1").change(function() {
  const qty =  this.value; // cast to int

  for (let x = 0; x < arrayqti.length; x  ) {
    if (qty >= arrayqti[x]) {
      document.getElementById('a2').value = arrayppu[x];
      document.getElementById('a3').value = (qty * arrayppu[x]).toFixed(2);
    }
  }
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="a1" step='100' />A1<br>
<input type="text" id="a2" />A2<br>
<input type="text" id="a3" />A3<br>

Возможно, более элегантный

 const arrayqti = [100, 200, 400, 600, 800];
const arrayppu = [2.0, 1.8, 1.6, 1.4, 1.2];

$("#a1").change(function() {
  const qty =  this.value; // cast to int
  const qti = arrayqti.filter(qti => qty >= qti).pop(); // highest 
  const ppu = arrayppu[arrayqti.indexOf(qti)]
  document.getElementById('a2').value = ppu;
  document.getElementById('a3').value = (qty * ppu).toFixed(2);
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="a1" step='100' />A1<br>
<input type="text" id="a2" />A2<br>
<input type="text" id="a3" />A3<br>