How to access values present in one jquery function into another jquery function?

Question

I would like to know that I have two jquery scripts.

1- A gauge meter (using jqwidgets.com library)

2- My own defined script

A gauge meter is basically a widget which I am using. Now I want to access the value of gauge meter. If meter reading is, lets assume 10, then i want that 10 value to be accessible in my own defined script so that i can use it where ever and for whatever purpose. Here is the html code.

  <div class="demo-gauge" style="position: relative;height: 200px;margin-left:2.5em;">

     <div id='gauge' style="position: absolute; top: 0px; left: 0px;">
           </div>
         <div id='slider' style="position: absolute; top: 160px; left: 5px">
              </div>
  </div>

and the script for the gauge. my script will just get the value and simply alert it at the moment.

<script type="text/javascript">
   var gauge_value = endValue;


$(document).ready(function () {         
            $('#gauge').jqxGauge({
                ranges: [{ startValue: 0, endValue: 130, style: { fill: '#4cb848', stroke: '#4cb848' }, startDistance: 0, endDistance: 0 },
                         { startValue: 130, endValue: 180, style: { fill: '#fad00b', stroke: '#fad00b' }, startDistance: 0, endDistance: 0 },
                         { startValue: 180, endValue: 220, style: { fill: '#e53d37', stroke: '#e53d37' }, startDistance: 0, endDistance: 0}],
                cap: { size: '5%', style: { fill: '#2e79bb', stroke: '#2e79bb'} },
                border: { style: { fill: '#8e9495', stroke: '#7b8384', 'stroke-width': 0 } },
                ticksMinor: { interval: 0, size: '5%' },
                ticksMajor: { interval: 0, size: '10%' },       
                labels: { position: 'outside', interval: 60 },
                pointer: { style: { fill: '#2e79bb' }, width: 5 },
                animationDuration: 1500
            });
            $('#slider').jqxSlider({ min: 0, max: 220, mode: 'fixed', ticksFrequency: 20, width: 150, value: 120,  showButtons: true });

            $('#slider').mousedown(function () {
                $('#gauge').jqxGauge('value', $('#slider').jqxSlider('value'));
            });
            $('#slider').on('slideEnd', function (e) {
                $('#gauge').jqxGauge('value', e.args.value);
            });
            $('#slider').on('mousewheel', function () {
                $('#gauge').jqxGauge('value', $('#slider').jqxSlider('value'));
            });
            $('#gauge').jqxGauge('value', 120);
        });
    </script>

I have tried to put the end value which is 120 by doing this

var gauge_value = endValue;

but when i alert it in the other script it alerts undefined

Answer 1

I don't know what is your problem obviously, but you can use

gauge_value = endValue;

instead of

var gauge_value = endValue;

to define a global variable in jQuery