CODEWITHSUNDEEP
javascriptjquery
Berstos
Berstos

Reputation: 179

Accessing variables from different functions

I have two variables let bonus and let itemlevel2 which I want to use in the function getResponse. The itemlevel2 variable is the current chosen value of a slider.

At the moment I can only use the itemlevel2 variable in the getResponse function, but I can´t access the bonus variable.

How can I use both variables in the getResponse function correctly?

jQuery(function ($) {

    $(function () {   
        $("#slider-vertical").slider({
            orientation: "horizontal",
            range: "min",
            min: 0,
            slide: function (event, ui) {
                $("#amount").val(ui.value);
            },
        });

        getResponse(0);
        $('ul#menu li').click(function () {
            let bonus = $(this).attr("value");
            getResponse(bonus);
        });

        $('#slider-vertical').on('slide', function (event, ui) {
            let itemlevel2 = $("#slider-vertical").slider("value");
            getResponse(itemlevel2);
        });

    });

    function getResponse(itemlevel2, bonus) {
        $.ajax({
            type: "GET",
            cache: "true",
            url: "itemscript.php",
            data: {
                "bonus": bonus,
                "itemlevel": itemlevel2
            },
            success: function (data) {
                $('.item-content').html('<div class="tooltipitem-site"><div class="ui-tooltip-site">' + data + '</div></div>');

            }
        });
    }
});

Upvotes: 1

Views: 40

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

One way to achieve this would be to invert the dependency so that the getResponse() function is responsible for retrieving the information it needs from the DOM.

This way you avoid the 'async' issue of the bonus and itemlevel2 values being set at different times, and also the need for any global variables. Try this:

jQuery($ => {
  $("#slider-vertical").slider({
    orientation: "horizontal",
    range: "min",
    min: 0,
    slide: function(event, ui) {
      $("#amount").val(ui.value);
    },
  });

  getResponse(0);
  
  let $li = $('ul#menu li').on('click', function() {
    // set a class on the clicked element to be able to read its properties later
    $li.removeClass('active');
    $(this).addClass('active');
    getResponse();
  });

  $('#slider-vertical').on('slide', getResponse);
});

function getResponse() {
  let bonus = $('ul#menu li.active').attr('value');
  let itemlevel2 = $("#slider-vertical").slider("value");

  $.ajax({
    type: "GET",
    cache: "true",
    url: "itemscript.php",
    data: {
      "bonus": bonus,
      "itemlevel": itemlevel2
    },
    success: function(data) {
      $('.item-content').html('<div class="tooltipitem-site"><div class="ui-tooltip-site">' + data + '</div></div>');
    }
  });
}

As a side note, your code implies that the li has a value attribute which is not valid HTML. If you want to store custom metadata on an element in the DOM use data attributes instead, eg. data-value.

Upvotes: 1

Related Questions