Iterate using Array.forEach in JavaScript

Question 1

I want to use this Fluid Player function for each video with the same class name. I heard that I can do it using theArray.forEach() method, but I have no idea how.

I have also tried using a normalfor loop, and executing the Fluid Player function on every array element but it didn't work.

What am I doing wrong?

<!DOCTYPE html><html><body> <link rel="stylesheet" href="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" type="text/css"/><script src="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script><video class = "classname" height="225" loop  controls>   <source src="deja vu.mp4" type="video/mp4"/></video><video class = "classname" height="225" loop  controls>   <source src="deja vu.mp4" type="video/mp4"/></video><video class = "classname" height="225" loop  controls>   <source src="deja vu.mp4" type="video/mp4"/></video></body><script type="text/javascript">var array = document.getElementByClassName('classname');Array.forEach(); </script><script type="text/javascript"> var myFP = fluidPlayer(        'short',        {            layoutControls: {    fillToContainer: false,    primaryColor: false,    posterImage: false,    autoPlay: false,    playButtonShowing: true,    playPauseAnimation: true,    mute: false,    logo: {      imageUrl: null,      position: 'top left',      clickUrl: null,      opacity: 1,      mouseOverImageUrl: null,      imageMargin: '2px',      hideWithControls: false,      showOverAds: false    },    htmlOnPauseBlock: {      html: null,      height: null,      width: null    },    allowDownload: false,    allowTheatre: false,    playbackRateEnabled: false,    controlBar: {      autoHide: true,      autoHideTimeout: 1,      animated: false    },            },            vastOptions: {            }        }    );</script></html>

Question 2

Ehh ... can you tell us what you want to do in the iteration? Also,getElementByClassName doesn't return an array, it returns a HTMLCollection object. Though that object hasforEach method in modern browsers.

Question 3

on array that i made using getElementByClassName function

Question 4

It's a bit unclear what you're asking, maybe documentation offorEach helps ..?

Question 5

So is it even possible to do it the way im using now?

Question 6

Your currentfluidPlayer( call doesn't seem to take any arguments related to elements, though...

Question 7

The wording of your question is a bit confusing

"I want to use this fluidplayer function to every video with the same class name"

to do what with every classname?

in terms of forEach.

forEach is a method that takes a function, you can either pass it a function to run on the iterations of the target array or you can include an arrow function or anonymous function like this:

array.forEach(classname => console.log(classname))

// if array = [1,2,3,4] then this will return 1 2 3 and 4 on seperate lines.

Each element of the 'array' array will be iterated over and the function will be called once for each element, passing the element into the function as 'classname' from where we can do whatever we want with it.Your array is called 'array' so we are using the prototype method forEach that exists on every javascript array. We don't need to use Array. although there are some methods that work this way (Array.isArray(array) for example would return true)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

Question 8

You've got the same ID for all videos which you want to use with Fluid Player. Aside from being bad practice (element IDs should be unique), Fluid Player only works with the ID so these IDs need to be different. You're also using the non-existantgetElementByClassName(), you need to usegetElementsByClassName().

getElementsByClassName() doesn't actually return an array, it returns aHTMLCollection, which isn't exactly the same. You want to usefor x of y instead.

Try this:

<!DOCTYPE html><html><body>     <link rel="stylesheet" href="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" type="text/css"/>    <script src="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>    <video height="225" loop  controls>         <source src="deja vu.mp4" type="video/mp4"/>    </video>    <video height="225" loop  controls>         <source src="deja vu.mp4" type="video/mp4"/>    </video>    <video height="225" loop  controls>         <source src="deja vu.mp4" type="video/mp4"/>    </video></body><script type="text/javascript">var vidCollection = document.getElementsByClassName('videoClass');for (let vidElement of vidCollection) {    fluidPlayer(        vidElement.id,        {            layoutControls: {                fillToContainer: false,                primaryColor: false,                posterImage: false,                autoPlay: false,                playButtonShowing: true,                playPauseAnimation: true,                mute: false,                logo: {                  imageUrl: null,                  position: 'top left',                  clickUrl: null,                  opacity: 1,                  mouseOverImageUrl: null,                  imageMargin: '2px',                  hideWithControls: false,                  showOverAds: false                },                htmlOnPauseBlock: {                  html: null,                  height: null,                  width: null                },                allowDownload: false,                allowTheatre: false,                playbackRateEnabled: false,                controlBar: {                  autoHide: true,                  autoHideTimeout: 1,                  animated: false                },            },            vastOptions: {}        }    );}</script></html>

Question 9

I got this king of message in console log Uncaught TypeError: vidArray.forEach is not a function

Question 10

Can you try it again with the updated class name ofvideoClass ingetElementsByClassName()?

Question 11

Sorry but i cant understand what you mean by it. Im using same class name in getElementsByClassName() as in video html tags.

Question 12

Ah - my mistake, getElementsByClassName doesn't return an array, it returns a HTMLCollection, which isn'texactly the same. You want to uselet x of y instead - I'll update my answer.

Question 13

Nice, it's working now. Thanks you very nuch for your help :)

Happy Machine 1,1731 gold badge18 silver badges37 bronze badges · Accepted Answer · 2018-12-28 20:53:21Z

The wording of your question is a bit confusing

"I want to use this fluidplayer function to every video with the same class name"

to do what with every classname?

in terms of forEach.

forEach is a method that takes a function, you can either pass it a function to run on the iterations of the target array or you can include an arrow function or anonymous function like this:

array.forEach(classname => console.log(classname))

// if array = [1,2,3,4] then this will return 1 2 3 and 4 on seperate lines.

Each element of the 'array' array will be iterated over and the function will be called once for each element, passing the element into the function as 'classname' from where we can do whatever we want with it.Your array is called 'array' so we are using the prototype method forEach that exists on every javascript array. We don't need to use Array. although there are some methods that work this way (Array.isArray(array) for example would return true)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

Movatterモバイル変換

Collectives™ on Stack Overflow

Iterate using Array.forEach in JavaScript

2 Answers2

Comments

6 Comments

Your Answer

Sign up orlog in

Post as a guest

Related

Hot Network Questions

Subscribe to RSS