Is there a way to move divs through an array?-CodePudding

self teaching javascript I wanted to create a menu sort of like Netflix where as you scroll right or left you can go through shows/movies, however, it would be with left and right arrows, i.e if I moved right, block2 would be in block1 position, block3 in block2, etc

I was thinking that I could assign each block a position in an array: var menuBar = [block1, block2, block3, block4]; then iterate through the array

for(var i=0; i < menuBar.length(); i  ){
switch (e.key) {
            case 'ArrowLeft':
                i--;
                GoThroughMenu();
                break;
            case 'ArrowRight':
                i  ;
                GoThroughMenu();
                break;
}

and GoThroughMenu() would move the blocks

block1.style.left = menuBar[i].style.left   'px';
block1.style.top = menuBar[i].style.top   'px';

Right now nothings moving, is there errors in the way I'm going about this?

CodePudding user response：

left and top css properties only work with a non-position: static value (which is the default position value of all elements).

Try giving the menuBar items a position: relative;.

CodePudding user response：

Just add position: relative; into #box. it will work fine.

Check here working example https://jsfiddle.net/milytulip/x52goy3s/2/

#box{
    width: 1000px;
    height: 200px;
    background-color: black;
    position: relative;
}