If statement malfunctioning

[dportilla0001]

I am currently using an if statement to make a div appear when another div has reached the coordinates of 525px and 50px.

First, I made a function:

function verifyThePosition (button) {

}

Next, I put the if statement checking positions:

function verifyThePosition (button) {
   if (icon.style.left == "525px" && icon.style.top == "50px") {

   }
}

now, I put in what’s it supposed to do:

function verifyThePosition (button) {
   if (icon.style.left == "525px" && icon.style.top == "50px") {
      console.log(left + "&&" + top)
      button.classList.add("show") 
   }
}

This code does not work, event if I move it to the exact positions.
What am I doing wrong.
Thanks Ahead of time,
Dimitri

[armanalahi]

sorry I have no know solution for this problem

[dportilla0001]

@armanalahi ,

That’s okay, thanks for trying! I value that.

Thanks,
Dimitri

[kevinSmith]

Before the if statement, can you put a console.log(icon) so we can see what we’re dealing with?

[dportilla0001]

@kevinSmith ,

Since icon is not text, it would come out as undefined. icon is a black square you can move via arrow keys:

<div class="icon" id="icon"></div>

.icon {
	width: 35px;
	height: 35px;
	background: black;
/* 	border-radius: 50%; */
	z-index: 10;
	transition: 300ms ease-in-out;
}

var icon = document.querySelector('#icon');
let moveBy = 25;
man.style.position = "absolute";
man.style.left = 0;
man.style.top = 0;

window.addEventListener("keyup", (e) => {
  switch (e.key) {
			case "ArrowLeft":
		  		update();
				icon.style.left = parseInt(man.style.left) - moveBy + "px";
      		break;
			case "ArrowRight":
		  		update();
				icon.style.left = parseInt(man.style.left) + moveBy + "px";
      		break;
			case "ArrowUp":
		  		update();
				icon.style.top = parseInt(man.style.top) - moveBy + "px";
      		break;
			case "ArrowDown":
		  		update();
				icon.style.top = parseInt(man.style.top) + moveBy + "px";
	}
});

Thanks,
Dimitri

[kevinSmith]

OK, how about icon.style? Or icon.style.left and icon.style.top?

And it is not clear to me that the variable icon is an icon in the sense that you mean. I think it is a pointer to a selected HTML element.

And anything in JS, that isn’t a primitive, is some kind of an object.