Невозможно обновить глобальную переменную, используя JavaScript по нажатию кнопки

Question

Мне нужно обновить глобальную переменную price. Я считаю, что это может иметь какое-то отношение к сфере. Буду признателен за помощь в этом отношении.

Это скрипт:

var price = 0;

var nextdayClass = $('.delivery1');
var $standardClass = $('.delivery2');
var $pickupClass = $('.delivery3');

nextdayClass.on('click', function() {
               var nextday = $('#nextday').data('price');
               price = nextday;
               console.log(price);
});
standardClass.on('click', function () {
                var standard = $('#standard').data('price');
                price = standard;
                console.log(price);
            });
pickupClass.on('click', function () {
                var pickup = $('#pickup').data('price');
                price= pickup;
                console.log(price);
            });
console.log(price);

cartTotalHTML += '<div>' +
                '<ul>' +
                '<li>' +
                '<div>Subtotal</div>' +
                '<div>' + formatMoney(total) + '</div>' +
                '</li>' +
                '<li>' +
                '<div>Shipping</div>' +
                '<div>' + formatMoney(price) + '</div>' +
                '</li>' +
                '<li>' +
                '<div>Total</div>' +
                '<div>' + totalAfterShipping(total, price) + '</div' +
                '</li>' +
                '</ul>' +
                '</div>';
$('#cartOutput').html(cartItemHTML);

Вот HTML, откуда я получаю свои данные:

                <div class="delivery">
                            <div>Shipping method</div>
                            <div>Select the one you want</div>
                            <div class="delivery_options">
                                <label>Next day delivery
                                    <input id="nextday" type="radio" name="radio" data-name="nextday" data-price="9000">
                                    <span class="checkmark delivery1"></span>
                                    <span class="delivery_price">R90</span>
                                </label>
                                <label>Standard delivery
                                    <input id="standard" type="radio" name="radio" data-name="standard" data-price="3000">
                                    <span class="checkmark delivery2"></span>
                                    <span >R30</span>
                                </label>
                                <label>Personal pickup
                                    <input id="pickup" type="radio" checked="checked" data-name="pickup" data-price="0" name="radio">
                                    <span class="checkmark delivery3"></span>
                                    <span >Free</span>
                                </label>
                            </div>
                        </div>

Вот HTML, куда я беру свои данные:

<div class="col-lg-6 offset-lg-2">
                        <div class="cart_total">
                            <div>Cart total</div>
                            <div>Final info</div>
                            <div id="cartTotalOutput">

                            </div>
                            <div><input type="submit" class="button checkout_button"></div>
                        </div>
                    </div>
                </div>

Answer 1

Это не имеет ничего общего с областью действия.

Посмотрите на ваш код:

1. Вы получаете элемент
2. Вы говорите, что , когда вы щелкаете элемент price, должно быть обновлено (ну, вы пытаетесь to, вы сделали опечатку и назвали add вместо on )
3. Вы смотрите на price

Предположительно, в какой-то момент позже вы щелкаете элемент.

В этот момент price обновляется.

Ты больше не смотришь на это.

JavaScript не путешествует во времени в прошлое и не меняет price до того, как вы посмотрели его в первый раз.

Запись о значении при просмотре , отображаемая в консоли, не изменится.

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

var price = 0;
var nextdayClass = $('.delivery1');

nextdayClass.on('click', function() {
  var nextday = $('#nextday').data('price');
  price = nextday; // The window object stuff is a waste of time
  console.log("Clicked value", price);

});
console.log("Initial value", price);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="delivery1">5</button>
<span id=nextday data-price=5></span>

Answer 2

Попробуйте JQuery on(), например, так как я предполагаю, что ваш элемент может генерироваться динамически, попробуйте привязать обработчик событий к элементу body /

var price = 0;
var nextdayClass = $('.delivery1');

$('body').on('click', nextdayClass, function() {
  var nextday = $('#nextday').data('price');
  window['price'] = nextday;
});
console.log(price); //Prints out 0

Answer 3

Здесь есть две проблемы. Во-первых, add() - добавить элемент в коллекцию, а не прикреплять обработчик событий. Чтобы делать то, что вы хотите, используйте click() или on().

Во-вторых, price обновляется только после , когда происходит событие щелчка, но ваша логика пытается прочитать его немедленно. Для решения этой проблемы вам нужно поместить строку console.log() в этот обработчик событий. Попробуйте это:

var price = 0;
var $nextdayClass = $('.delivery1');

$nextdayClass.on('click', function() {
  var nextday = $('#nextday').data('price');
  price = nextday;
  console.log(price);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="delivery1">Click me</button>

<div id="nextday" data-price="1.99">Next day: 1.99</div>

Стоит также отметить, что по возможности следует избегать использования глобальных переменных. Лучшим шаблоном для использования будет просто получить атрибут data, который содержит цену там, где он действительно необходим, и полностью удалить переменную price.