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

Question

[OculusDaemon]

Подскажите пожалуйста, как переменные delivery и number использовать в другой функции?
https://codepen.io/OculusDaemon/pen/OOrXqW?editors=1010

Answer 1

[VoidVolker]

$(document).ready(function(){
    var delivery, number;
    $('#delivery input:checked').change(function(){
        delivery = $(this).val();    
    });
 
    $('#number').change(function(){
        number = $(this).val();
    });
    
    $('#number-of-pairs').change(function(){
        let pairs = $(this).val();
        let full_price = (parseInt(delivery) + parseInt(pairs)) * parseInt(number);
        $('#price').text(full_price);
    });
 });

UPD. Решение именно задачи:
https://jsfiddle.net/m9e54a9w/

var $pairs = $('#number-of-pairs')
    , $number = $('#number')
    , $price = $('#price')
;

function showPrice(){        
    var $delivery = $('#delivery input:checked')
        , number = parseInt( $number.val() || 1 )
        , pairs = parseInt($pairs.val())
        , delivery = parseInt($delivery.val() || 0)
    ;
    $price.text(pairs * number + delivery);
}

$('#number-of-pairs, #number, #delivery input').change(showPrice);
$('#number').on('keyup', showPrice);
showPrice();

Comments

[OculusDaemon]

Выдает undefined на вызов переменных

[Николай Шабалин]

OculusDaemon, скорее всего, потому что Вы их ещё не заполнили. changeмог произойти только в delivery, а в number ещё нет, поэтому let number пока что равен undefined. У Вас наверняка в инпутах при инициализации уже будет какое-то value, вот это value и присвойте переменным

var delivery = $('#delivery input').val() || 0;
number = $('#number').val() || 0;

[OculusDaemon]

Николай Шабалин, При изменении number и deliveryне отрабатывает change. Сумма меняется только после перезагрузки страницы, или при изменении pairs
Полный пример https://jsfiddle.net/OculusDaemon/k21muxm5/

[VoidVolker]

Вопрос был лишь о том как использовать переменные.

[OculusDaemon]

VoidVolker, По сути, да. Не подскажете тогда почему на numberи delivery не отрабатывает change и как это исправить?

[VoidVolker]

https://jsfiddle.net/m9e54a9w/ - вот так надо делать.

[OculusDaemon]

VoidVolker, Огромное Вам спасибо!

[OculusDaemon]

VoidVolker, Подскажите пожалуйста, как этот скрипт использовать к нескольким таким формам?

[s-jet]

OculusDaemon, Создавать объект с методом showPrice и в инициализации передавать id формы

[VoidVolker]

Подскажите пожалуйста, как этот скрипт использовать к нескольким таким формам?

Выделить в отдельную функцию и в аргументах передавать идентификатор формы, а в элементах заменить идентификаторы на классы.

function FormInit(formId) {

    var pairsSelector = formId + ' .number-of-pairs'
        , numberSelector = formId + ' .number'
        , priceSelector = formId + ' .price'
        , deliverySelectorChecked = formId + ' .delivery input:checked'
        , deliverySelector2 = formId + ' .delivery input'
        , $pairs = $(pairsSelector)
        , $number = $(numberSelector)
        , $price = $(priceSelector)
    ;

    function showPrice(){        
        var $delivery = $(deliverySelectorChecked)
            , number = parseInt( $number.val() || 1 )
            , pairs = parseInt($pairs.val())
            , delivery = parseInt($delivery.val() || 0)
        ;
        $price.text(pairs * number + delivery);
    }

    $(
        pairsSelector + ', ' + 
        numberSelector + ', ' + 
        deliverySelector2
    ).change(showPrice);

    $number.on('keyup', showPrice);
    showPrice();
}

FormInit('#form1');
FormInit('#form2');
FormInit('#form3');

Answer 2

[s-jet]

Не работало у вас потому что область видимости у let ограничивается блоком в котором она находится.
Нужно так: https://jsfiddle.net/5pdbsst7/1/
Но желательно не нули присваивать в качестве дефолтных, а сразу брать откуда-то

Comments

[OculusDaemon]

На number и deliveryне отрабатывает change, только после перезагрузки или при изменении pairse
Код с полным примером https://jsfiddle.net/OculusDaemon/k21muxm5/