JS How to get value of variable from the function above?

Here is the script. The problem is that the variable is not displayed after the function
scaleBannerVideoSize function(element){

 var windowWidth = $(window).width(),
 windowHeight = $(window).height() - 90,
videoWidth,
videoHeight;

$(element).each(function(){
 $(this).bind("loadedmetadata", function () {
 videoHeight = this.videoHeight;
 videoWidth = this.videoWidth;
 console.log(videoWidth); // prints
});
 console.log(videoWidth); // does not output
});
});
July 12th 19 at 16:43
4 answers
July 12th 19 at 16:45
Solution
All right, corrected. Now a similar problem, the row count is always equal 5 to me at the right moment

scaleBannerVideoSize function(element){


 var row = 0;
$(element).each(function(){

 var windowWidth = $(window).width(),
videoHeight,
videoWidth;
 if(row == 0){var windowHeight = $(window).height()}else{var windowHeight = $(window).height() - 90}
 if(row == 1){var windowHeight = $(window).height() / 2}
 $(this).bind("loadedmetadata", function () {
 videoHeight = this.videoHeight;
 videoWidth = this.videoWidth;

 var videoAspectRatio = videoHeight/videoWidth,
 windowAspectRatio = windowHeight/windowWidth;

 if (videoAspectRatio > windowAspectRatio) {
 videoWidth = windowWidth;
 videoHeight = windowHeight;
 $(this).css({'top' : 0, 'margin-left' : 0});
 } else {
 videoHeight = windowHeight;
 videoWidth = videoHeight / videoAspectRatio;
 $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
}
 if(row == 1){$(this).css({'margin-top' : 123 + 'px'});} // row always = 5

$(this).width(videoWidth).height(videoHeight);

 $('section .video-container video').addClass('fadeIn animated');
});
++row;
});
}
Again the same problem - each loop works almost instantaneously, and row to the end of the iteration is filled with number of elements. Then comes the loadedmetadata event for each item and row is equal to five. You better use a for loop (there is already the index of the current element, and use it, or you can pass row as a parameter to the function that is called when loadedmetadata - sheldon_Kautzer73 commented on July 12th 19 at 16:48
The easiest way is to wrap the entire structure $(this).bind into a closure:
!function(row){
 $(this).bind("loadedmetadata", function () {
//...
});
}.call(this, row);
- trisha_Kovacek commented on July 12th 19 at 16:51
: THANKS! - Chadrick_Spenc commented on July 12th 19 at 16:54
July 12th 19 at 16:47
Chances are you is displayed undefined in each iteration, the point of async work - at the time of function execution the event has not yet occurred, and js is already running. And then, when the event happened, then everything works as it should.

The decision depends on the desired result.
July 12th 19 at 16:49
Read here: www.puzzleweb.ru/javascript/4_variables.php
To understand what are variables, what are the global variables and what is variable scope.
Having read to the end you will find a 100% solution
Alas, I tried that. Not in this case. - sheldon_Kautzer73 commented on July 12th 19 at 16:52
It seems the problem is not in scope (ie global variables), and async work - trisha_Kovacek commented on July 12th 19 at 16:55
: As an option in the data write videoWidth attribute - Chadrick_Spenc commented on July 12th 19 at 16:58
: And Your version doesn't work because the 2nd console.log(videoWidth); fires up and I can run a function over it. - Chadrick_Spenc commented on July 12th 19 at 17:01
: If you put the task, find the answer. It is not clear why so? - sheldon_Kautzer73 commented on July 12th 19 at 17:04
that works out later. put the whole function inside the bind is now working. Only there is another problem. Now will update the main post - Rey_Wate commented on July 12th 19 at 17:07
July 12th 19 at 16:51
You need to make a circuit that would counter worked. You can find the answer here

Find more questions by tags JavaScript