How can I get the value of a string variable containing unicode outside of the function it is created in?

Question

I want to have access to the 'result' variable outside the first function. knowing that it's value is a Unicode such as 'ﺏ'. as I am new to this I ask for your Help. thanks.

here is my code. alert(r) shows an empty diologue box:

    var result = '';

    $( document ).ready(function() {

        $( function() {
            $( "#draggable" ).draggable({ snap: ".baseline, .BF, .AF"});
            $( "#draggable2" ).draggable({ snap: ".baseline, .font"});
            $( "#draggable3" ).draggable({ snap: ".baseline, .font"});
            $( "#selectable" ).selectable();
        });

        $( "#selectable" ).selectable({
            stop: function() {
                var result='';
                $('.ui-selected').each(function() {
                    result += $(this).text();
                 });   

            $("#result").html(result);
            $("#harf").html(result);

           }
        });


       $( "#draggable, #draggable2, #draggable3" ).draggable({
          drag: function() {                   
            alert(result);
          }
       });

  });

Possible duplicate of [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — lolbas, Jul 06 '18 at 11:57
The alert is running before #harf was filled. That's the async nature of javascript — baao, Jul 06 '18 at 11:57
I get it but can you tell me how can I have access to the result outside of the function? I tried global variable but it did not work. here what i posted is simplified version. after the code is supposed to compare result with other strings. — Sina, Jul 06 '18 at 12:01

Sahil Sharma · Answer 1 · 2018-07-06T12:19:03.753

2

As per Mark Baijens modified the code and it is working.

var result = '';
  
$( document ).ready(function() {
      result = '1';
      var r = result;
      alert(r);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The concern about using it later can be solved because you have created a global variable and can be accessed anywhere.

Try this:

<script>
      var result = '';

        $( document ).ready(function() {
            $( "#selectable" ).selectable({
                stop: function() {
                    $('.ui-selected').each(function() {
                        result += $(this).text();

                     });   

                $("#result").html(result);
                $("#harf").html(result);

                var r = result ;
                alert(r);
               }
            });
        });

  </script>

edited Jul 06 '18 at 12:19

answered Jul 06 '18 at 12:06

Sahil Sharma

1,813
1
16
37

have tried this. does not work. by the way bambam was correct about the execution of the functions so I modified my code. but still does not work. – Sina Jul 06 '18 at 12:09
1

@Sina This does not work because alert is executed before the ready function. Place the alert inside the ready function after the selectable function and it works. – Mark Baijens Jul 06 '18 at 12:12
@MarkBaijens Can't place it inside cause I want to use result inside other functions later and compare it with other strings. here I just put alert to simplify my question – Sina Jul 06 '18 at 12:14
1

@Sina You can still use the `result` variable it in later functions as long those functions are executed after the initial document load. – Mark Baijens Jul 06 '18 at 12:15

Mark Baijens · Accepted Answer · 2018-07-06T13:08:35.023

Java script runs when it is parsed. Thats why we use $(document).ready() as an event handler to execute code after the dom is loaded. And thats why your global is not filled yet. For example $(window).load() will run after $(document).ready() as the first will wait for all content to be loaded while the second only wait for the dom. Therefore this code works.

var string = "";



$(window).load(function(){
  alert(string);
  console.log("im forth after the alert and filled with the ready value: " + string);
});

$(document).ready(function(){

  $("#button").click(function(){
      console.log("I'm on click: " + string);
  });

  string = "I'm filled";
  console.log("im third and filled with the ready value: " + string);
});

console.log("im first but empty: " + string);

string = "initial value";

console.log("im second but filled with an initial value: " + string);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="button">Button</Button>

Edit: Added a few console prints to show what is happening

Edit2: Your code would need to be something like this.

var result = '';
$( document ).ready(function() {
    $( function() {
        $( "#draggable" ).draggable({ snap: ".baseline, .BF, .AF"});
        $( "#draggable2" ).draggable({ snap: ".baseline, .font"});
        $( "#draggable3" ).draggable({ snap: ".baseline, .font"});
        $( "#selectable" ).selectable();
    });

    $( "#selectable" ).selectable({
        stop: function() {
            $('.ui-selected').each(function() {
                result += $(this).text();
            });   

            $("#result").html(result);
            $("#harf").html(result);
        }
    });


    $( "#draggable, #draggable2, #draggable3" ).draggable({
        drag: function() {                   
            alert(result);
        }
    });
});

How can I get the value of a string variable containing unicode outside of the function it is created in?

2 Answers2