How do I can access an outside function varible, inside a function in javascript?

Question

I've a percent variable in my javascript, that variables is passing result from PHP.

This is the javascript:

test.js

console.log(percent); //* //variable was passed from PHP

function displayLoading() {
    console.log(percent); //**
}

If I use *console.log(percent) out the function it will print_out the value of percent in console. But if I use **console.log(percent) inside the displayLoading function, it will print_out as undefined.

How I can access the outside variable inside a function?

I've tried this way

from stackoverflow

var funcOne = function() {
    this.sharedVal = percent;
};
var funcTwo = function() {
    console.log(funcOne.sharedVal);
};

and give print_out undefined into console log.

and

from stackoverflow

var per = percents
console.log(per);   //this line print_out the value into console log

function displayLoading() {
   console.log(per);    //this print_out "undefined" into console log.
   var myPercent = per;
   console.log(per);    //and also print_out "undefined" into console log.
}

Both of code above didn't work for me, any one know another way? Any help is appreciated, thanks :)

EDITED:

The percents inside javascript above, I get from this code:

headerController.php

<?php
   $percent = $percent + 10;
?> 
    <script type="text/javascript">
       var percents = <?= $percent; ?>;
    </script>
    <script type="text/javascript" src="../../web/js/test.js"></script>

The main problem has found, the reason why I got undefined is because I print_out the percents right before the variable has passed from php.

How do I can pass php variable directly into a function in javascript file (test.js in this case)?

Maybe, you're assigning the variable locally, try assigning it outside then use console.log(window.percent); inside the function — PauAI, Jan 17 '17 at 05:32
this little code snippet is not enough to determine the problem. If percent is a global var (can't see how it's being defined, so who knows) then the very first code snippet should work fine — Jaromanda X, Jan 17 '17 at 05:36
I'm sorry about the code, I have update my question. Check it :) Thanks — Blackjack, Jan 17 '17 at 06:34
I guess the main problem here is that you call the variable before it's being set, so to test that out, use a timeout function for example `setTimeout(function(){ displayLoading(); }, 3000);` then see what you will get — Mostafa Omar, Jan 17 '17 at 06:42
@MostafaOmar Yeah your'e right, I call the function through button. And I exexute the function first before the php variable pass to javascript. Ok, I'll try — Blackjack, Jan 17 '17 at 07:00

score 0 · Answer 1 · answered Jan 17 '17 at 05:30

0

Define a global variable.

percent = 'foobar';
// window.percent = 'foobar'; /* same thing */

function showthing() {
  console.log(percent);
}

showthing();

answered Jan 17 '17 at 05:30

Michael Coker

52,626
5
64
64

Yah, thanks. I've try and it's work. But I make a mistake, the problem cause is I call the function when the php variable not passed yet to javascript. – Blackjack Jan 17 '17 at 08:31

score 0 · Answer 2 · answered Jan 17 '17 at 05:30

0

try removing var from var per = percents. like this

per = percents
console.log(per);   //this line print_out the value into console log

function displayLoading() {
   console.log(per);    
   var myPercent = per;
   console.log(per);    
}

answered Jan 17 '17 at 05:30

Justin

91
1
8

Why you declare `myPercent`? – Blackjack Jan 17 '17 at 07:28
that's not needed. i just copied and your code . all thing you have to do is change var per = percents to per = percents – Justin Jan 17 '17 at 11:49

score 0 · Answer 3 · answered Jan 17 '17 at 05:37

0

I don't know which console (browser or JS REPL - however they are almost same) are you talking about, but REPL always outputs the return value of a function. I don't think it's about global/local scope, as it's stated above.

>> p = 5; function dl() { console.log(p); }
<- 5
>> dl()
   5 
<- undefined
>> foo = function() { return "foo" }
<- function foo()
>> foo()
<- "foo"

answered Jan 17 '17 at 05:37

marmeladze

6,468
3
24
45

I'm using mozilla log console, that is REPL console result above? – Blackjack Jan 17 '17 at 07:26
this is also from mozilla's web console from developer tools. – marmeladze Jan 17 '17 at 07:31

score 0 · Answer 4 · answered Jan 17 '17 at 05:42

A variable:

1) Declared with var keyword has local scope where it is declared.(if you declared it outside function you can not use it inside function and vice versa.

Example:

   var  percent = 'foobar';
    function showthing() {
      console.log(percent);//wrong
    }
    console.log(percent);//correct

2) Declared within particular function has local scope within function.

Example:

     function showthing() {
     var  percent = 'foobar';
      console.log(percent);//correct
    }
console.log(percent);//wrong

Thanks for the knowledge :) – Blackjack Jan 17 '17 at 07:18 — Blackjack, Jan 17 '17 at 07:18

score 0 · Answer 5 · answered Jan 17 '17 at 05:50

0

Is it a problem with the way you pass the variable from PHP, like AJAX? When you call displayLoading() the AJAX call may not have answered yet.

answered Jan 17 '17 at 05:50

Alin Pop

317
2
8

Yeah, you're right :D. I call the function when the variable not passed yet. May be you know how I can pass directly into a function in javascript? – Blackjack Jan 17 '17 at 07:16
You could do something like this if you use jQuery: $.get( "ajax/test.php", function( data ) { displayLoading(); }); – Alin Pop Jan 17 '17 at 20:22
Thanks, I'm just learn about javascript / jquery. May I know exactly where I've tu put this code? inside _php controller_ code with `` or in my _test.js_? – Blackjack Jan 18 '17 at 02:43
In your javascript file. But my suggestion is to rather change the order of lines than adding new code. In the block of code where you do the AJAX, after you get the value for your variable, call that function displayLoading. If you wish to simply combine JS with PHP: Your HTML file should be a PHP file, right? So you write in the header or footer of HTML – Alin Pop Jan 18 '17 at 05:42