JavaScript NaN error when trying to detect CSS property "left"?

Question

This question piggy backs off of a question I asked yesterday. That question was:

"if" statement parameters not functioning as intended. JavaScript

But now i'm Getting a NaN error when I implement the following code:

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

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

Yesterday I didn't use "parseFloat", however my question is, if i'm specifically describing the parameter of targetBoxLeft as a CSS style.left property; why wouldn't that be a specific number? and why wouldn't it take on the number of left: 310px; as specified by the elements properties itself?

#targetBox{
position: absolute;
background-color: green;
height: 20px;
width: 20px;
top: 30px;
left: 310px;
opacity: 1;
}

Logically should the following 2 lines of code detect ACTUAL numbers?;

var bulletOneLeft = bulletOne.style.left;
var targetBoxLeft = targetBox.style.left;

And then once the above variables are detected as actual numbers, should the following if statement code be able to compare them depending on their values at any given time if movement(bulletOneLeft++;) is involved?:

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

Im not exactly sure whats happening but since i'm getting a NaN error for when targetBox.style.left is read by the code i'm guessing that maybe a CSS property needs additional code to be converted into an actual number/variable before I run the if statement with corresponding VAR's?

Maybe the script loads first before the CSS not sure or try accessing any other property — Ashwin Mothilal
– Ashwin Mothilal, Commented Apr 9, 2017 at 18:05
if i take "px" out it still treats it as a "string" - isn't 310 a number? not trying to be sarcastic, i genuinely mean isn't the property of css style.left 310 an actual number? — Ghoyos
– Ghoyos, Commented Apr 9, 2017 at 18:11

guest271314 · Accepted Answer · 2017-04-09 18:13:45Z

3

You are querying the .style.left property, which is not the same as computed style. .style property of element references style attribute value. parseFloat("") returns NaN. Use window.getComputedStyle()

var div = document.querySelector("div");
console.log(div.style.left, parseFloat(div.style.left));
console.log(parseFloat(window.getComputedStyle(div).getPropertyValue("left")));

div {
  position: relative;
  left:310px;
}

<div>div</div>

answered Apr 9, 2017 at 18:13

guest271314

1

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

16 Comments

guest271314 Over a year ago

You did not implement approach at Answer at jsfiddle at lines 29, and 30? targetBoxLeft is still a string at if statement block jsfiddle.net/7hm1jrvw/1

guest271314 Over a year ago

Where? Why is targetBoxLeft an empty string at if statement block following the line you referenced? See console at linked jsfiddle at previous comment.

guest271314 Over a year ago

"its not in the jsfiddle link" ? That is what asked at stackoverflow.com/questions/43310034/… ; that is, where implementation did not return expected result? "dont want to go down a rabbit whole of not working code with compounded not working code" You can adjust code in portions, then move to next portion when certain returning expected result, instead of attempting to solve the entire piece of code at once.

guest271314 Over a year ago

"targetBox" is not an html element at var targetBox = document.querySelector("targetBox");, you also overwrite previous assigned value of targetBox variable var targetBox = document.getElementById("targetBox");. Also, element reference should be passed to window.getComputedStyle(), not a string, at (parseFloat(window.getComputedStyle("targetBox").getPropertyValue("left"))); jsfiddle.net/7hm1jrvw/3

Ghoyos Over a year ago

Wow thx so much, i am going to read this very carefully because it is a bit complex, but i think once i get a solid understanding of what you did, it will help me with the rest of this project. THANKS!

|

Collectives™ on Stack Overflow

JavaScript NaN error when trying to detect CSS property "left"?

1 Answer 1

16 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related