"if" statement parameters not functioning as intended. JavaScript

Question

The following JavaScript "if" statement is not reading the parameters as I intended both parameters to be read. When I shoot bulletOne with a function that uses an interval to run bulletOneLeft++; the left CSS property of bulletOne increases by 1 with each interval as intended. However, when I coded the following if statement to detect the CSS style.left property of the bulletOne and compare it to the CSS style.left property of an element called "targetBox"; the code does not recognize the difference of the CSS style.left properties of these two elements. My question is how can I make this if statement execute once bulletOne's CSS style.left property is greater than targetBox's CSS style.left property numerically?

if (bulletOneLeft > targetLeftProp){
document.getElementById("targetBox").style.opacity = "0";   
};

The two parameters of bulletOneLeft and targetLeftProp are described with the following code;

bulletOneLeft;

#bulletOne {
position: absolute;
background-color: white;
height: 1px;
width: 6px;
top: 0px;
left: 0px;
}
bulletOne.style.left = bulletOneLeft;

targetLeftProp;

#targetBox{
position: absolute;
background-color: green;
height: 20px;
width: 20px;
top: 30px;
left: 310px;
opacity: 1;
}
var targetLeftProp = window.getComputedStyle(CSSelement, 
null).getPropertyValue("left");

PREVIOUS FAILED ATTEMPT; I have tried many different combinations of code, the following was my first failed attempt. The following code seemed the most logical at the time;

var bulletLeft = document.getElementById("bulletOne").style.left;
var targetLeft = document.getElementById("targetBox").style.left;

if (bulletOneLeft > targetLeft){
   document.getElementById("targetBox").style.opacity = "0";   
};

Your variable name isn't correct into the last piece of code.Your variable is named bulletLeft and you do the if with bulletOneLeft instead of bulletLeft. If you fix that, it'll probably works :) — Sorikairo
– Sorikairo, Commented Apr 8, 2017 at 23:36
In response to @guest271314, you have to use parseFloat w3schools.com/jsref/jsref_parsefloat.asp then. — Sorikairo
– Sorikairo, Commented Apr 8, 2017 at 23:40

Sorikairo · Accepted Answer · 2017-04-08 23:43:58Z

2

So first of all you made a typo that is why it doesnt work in your failed attemps.

Your variable is named bulletOne but you do your if statement with bulletOneLeft.

Also :

style.left;

return a string, so you have to do use parseFloat function or parseInt if you're sure it will always be an int (https://www.w3schools.com/jsref/jsref_parsefloat.asp, https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseInt) as following :

var bulletOne = parseFloat(document.getElementById("bulletOne").style.left;

And you are good to go I believe.

answered Apr 8, 2017 at 23:43

Sorikairo

7984 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ghoyos Over a year ago

thankyou, i didn't use a typo in the actual code, just in the question; but the parse float is what i needed thx buddy

Sorikairo Over a year ago

Enjoy, mind if I ask if this "game" (what it seems to be) will be released somewhere or made public somehow ? Could be fun to the what you're doing :)

Ghoyos Over a year ago

its simply a project im working on, its very basic, email me at [email protected] and ill send the entire code to you.

Collectives™ on Stack Overflow

"if" statement parameters not functioning as intended. JavaScript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related