Js recognizes only first 2 elements of an array in if

Based on my old question I started form scratch rebuilding my game in html/js/css. It seems to be working when I have only the player and 1 brick, but not when having 2 or more bricks.

I copied the concept about using one array to push objects inside. Then instead of a filter I used a for-of loop for this array for the movements in one function and check if curentElement(player 0) isn't the same as the Obj(selected by the loop) and then checks for the position and logs if it hits something. Here's my code:

window.addEventListener("keydown",function Keydown(e) {
		if (e.keyCode==37||e.keyCode==65) {
			for (i=0;i<16;i++) {
				if(move(currentElement,[-1,0])){break};
			}
		}
		else if (e.keyCode==38||e.keyCode==87) {
			for (i=0;i<16;i++) {
				if(move(currentElement,[0,1])){break};
			}
		}
		else if (e.keyCode==39||e.keyCode==68) {
			for (i=0;i<16;i++) {
				if(move(currentElement,[1,0])){break};
			}
		}
		else if (e.keyCode==40||e.keyCode==83) {
			for (i=0;i<16;i++) {
				if(move(currentElement,[0,-1])){break};
			}
		}
		return 0;
	}
);

function move(element,direction) {
	let newX=element.x+direction[0];
	let newY=element.y+direction[1];
	for (let Obj of Objects) {
		if (element!==Obj) {
			if (newX>=0&&newY>=0&&(newX+element.width)<=world.width&&(newY+element.height)<=world.height&&(newX>=(Obj.x+Obj.width)||newY>=(Obj.y+Obj.height)||(newX+element.width)<=Obj.x||(newY+element.height)<=Obj.y)) {
				element.x=newX;
				element.y=newY;
				element.setPosition();
				break;
			} else if (newX<=0&&direction[1]==0) {console.log("Off the world to the left")}
			else if (newY<=0&&direction[0]==0) {console.log("Off the world to the bottom")}
			else if ((newX+element.width)>=world.width&&direction[1]==0) {console.log("Off the world to the right")}
			else if ((newY+element.height)>=world.height&&direction[0]==0) {console.log("Off the world to the top")}
			else if (newX<=(Obj.x+Obj.width)) {console.log("Hitting to the right:",Obj)}
			else if (newY<=(Obj.y+Obj.height)) {console.log("Hitting to the top:",Obj)}
			else if ((newX+element.width)>=Obj.x) {console.log("Hitting to the left:",Obj)}
			else if ((newY+element.height)>=Obj.y) {console.log("Hitting to the bottom:",Obj)}
			return 1
		}
	}
	return 0;
}

function CreateObject(element,x,y) {
	const Hitbox={
		"class":element.className,
		"x":x,
		"y":y,
		"width":element.offsetWidth,
		"height":element.offsetHeight,
		"setPosition":function(){element.style.left=this.x+"px";element.style.bottom=this.y+"px";},
	}
	Hitbox.setPosition();
	Objects.push(Hitbox);
	return Hitbox;
}

const world={
	"width":document.getElementById("world").offsetWidth,
	"height":document.getElementById("world").offsetHeight
};

Objects=[];
const player=[
	CreateObject(document.getElementsByClassName("player")[0],0,0)
];
const brick=[
	CreateObject(document.getElementsByClassName("brick")[0],96,0),
	CreateObject(document.getElementsByClassName("brick")[1],128,32)
];
const currentElement=player[0];

#world {
	position:absolute;
	top:0px;
	left:0px;
	background-color:blue;
	width:640px;
	height:320px;
}
.player {
	position:absolute;
	background-color:red;
	width:32px;
	height:32px;
}
.brick {
	position:absolute;
	background-color:yellow;
	width:32px;
	height:32px;
}

<body>
	<div id="world">
		<div class="player"></div>
		<div class="brick"></div>
		<div class="brick"></div>
	</div>
	<script src="./js/physics.js"></script>
</body>

It should just stop me from hitting the 2nd brick(the 1st one stops me and logs it), but instead it let me pass through and doesn't log anything about it. It seams to get the right x,y,width,height,setPosition values, so I think it's due to the if statement inside the move function, but I'm not sure. Can someone explain me why is this happaning? I googled a lot, but nothing looks like is what I'm searching. PS: I would like to leave the code without jQuery, but if it's necessary to do the trick I will use it.

Solution

You are returning from within your for loop in your move function after processing the first non-currentElement object:

function move(element,direction) {
    let newX=element.x+direction[0];
    let newY=element.y+direction[1];
    for (let Obj of Objects) {
        if (element!==Obj) {
            if (newX>=0&&newY>=0&&(newX+element.width)<=world.width&&(newY+element.height)<=world.height&&(newX>=(Obj.x+Obj.width)||newY>=(Obj.y+Obj.height)||(newX+element.width)<=Obj.x||(newY+element.height)<=Obj.y)) {
                element.x=newX;
                element.y=newY;
                element.setPosition();
                break;
            } else if (newX<=0&&direction[1]==0) {console.log("Off the world to the left")}
            else if (newY<=0&&direction[0]==0) {console.log("Off the world to the bottom")}
            else if ((newX+element.width)>=world.width&&direction[1]==0) {console.log("Off the world to the right")}
            else if ((newY+element.height)>=world.height&&direction[0]==0) {console.log("Off the world to the top")}
            else if (newX<=(Obj.x+Obj.width)) {console.log("Hitting to the right:",Obj)}
            else if (newY<=(Obj.y+Obj.height)) {console.log("Hitting to the top:",Obj)}
            else if ((newX+element.width)>=Obj.x) {console.log("Hitting to the left:",Obj)}
            else if ((newY+element.height)>=Obj.y) {console.log("Hitting to the bottom:",Obj)}

            // Probably do NOT want to return here.. but rather just continue through the 
            // rest of the objects in Objects**
            return 1
        }
    }
    return 0;
}