Взаимодействие input

388

28 февраля 2017, 17:02

Всем привет.

У меня есть 4 input'a. Как мне сделать, что бы когда я вводил цифру в первый, то во-втором выводилась цифра из формулы 2x+1. В третьем выводилось число из формулы x^2 относительно второго input'a, а в четвёртом относительно третьего по формуле 3x/x^2?

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

$(function() { 
  $('#number_0').onkeypress(function() { 
    $('#number_1').val($(this).val()); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
  <span>Ваше число: </span><input type="number" id="number_0"> 
</p> 
<p> 
  <span>A1: </span><input type="number" id="number_1" readonly> 
</p> 
<p> 
  <span>A2: </span><input type="number" id="number_2" readonly> 
</p> 
<p> 
  <span>A3: </span><input type="number" id="number_3" readonly> 
</p>

Answer 1

Ваша первая проблема, с которой вы столкнулись, это то, что в JQuery функции назначаются без on

Пример:

$(element).click(function() {...});

Или же вот так:

$(element).on('click', function() {..});

Решение:

$(function() { 
  $('#number_0').keyup(function() { 
    // Приводим значение в цифренный формат и решаем уравнение 
    var num = 2 * parseFloat($(this).val()) + 1; 
    // Присваиваем значение 
    $('#number_1').val(num).change(); 
  }); 
   
  $('#number_1').on('change', function() { 
    // Приводим значение в цифренный формат и решаем уравнение 
    var num = parseFloat($(this).val()) ^ 2; 
    // Присваиваем значение 
    $('#number_2').val(num).change(); 
  }); 
   
  $('#number_2').on('change', function() { 
    // Приводим значение в цифренный формат и решаем уравнение 
    var num = ( parseFloat($(this).val()) * 3 ) / ( parseFloat($(this).val()) ^ 2 ); 
    // Присваиваем значение 
    $('#number_3').val(num).change(); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
  <span>Ваше число: </span><input type="number" id="number_0"> 
</p> 
<p> 
  <span>A1: </span><input type="number" id="number_1" readonly> 
</p> 
<p> 
  <span>A2: </span><input type="number" id="number_2" readonly> 
</p> 
<p> 
  <span>A3: </span><input type="number" id="number_3" readonly> 
</p>

Ещё для вывода не подойдёт keypress т.к. он выдаст предыдущее значение. Если уж использовать key, то уже keyup