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

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

   $percent = $percent + 10;
?> 
    
    

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)?