5 Replies - 638 Views - Last Post: 02 August 2014 - 05:59 AM

#1 martynball  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 127
  • Joined: 21-July 14

JavaScript if statement always true

Posted 01 August 2014 - 05:06 PM

Hey, I have the below code, it all works perfectly up until here:

if (parseInt(object.style.marginLeft.replace("px", "")) != 0) {
    setInterval(slider,50);
}



For some reason the if statement is always true, even though the object's margin property is reaching 0, but it continues to raise! Here is the full code:
//Animation function
function doAnimate(type, object) {
        //First define the array for effects
        var animationType = new Array();
        animationType["slide"] = ["direction", "offset", "time"];
        animationType["fade"] = ["direction", "target", "time"];
                               
        //Animation type and options
        var typeName = type.split(":")[0];
        var typeOptions = type.split(":")[1].split(",");
                               
        //Does the animation type exits
        if (typeof(animationType[typeName]) != "undefined") {
                //Go to the correct code
                switch(typeName) {
                        case "slide":
                                //Create variables for animation
                                var direction = animationType["slide"][0];
                                var offset = animationType["slide"][1];
                                var time = animationType["slide"][2];
                                                                                       
                                //Start the slider
                                var slider = function() {
                                        object.style.marginLeft = parseInt(object.style.marginLeft.replace("px", "")) + 1;
                                        console.log(parseInt(object.style.marginLeft.replace("px", "")));
                                }
                                if (parseInt(object.style.marginLeft.replace("px", "")) != 0) {
                                        setInterval(slider,50);
                                }
                                break;
                        case "fade":
                                                       
                                break;
                }
        }
}



The code which calls the function:
<span onclick="doAnimate('slide:left,10,100', this)" style="background-color:red; margin-left:-20;" />Martyn Ball</span>



Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript if statement always true

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,991
  • Joined: 08-June 10

Re: JavaScript if statement always true

Posted 01 August 2014 - 05:20 PM

Keep in mind that if the value you feed the parseInt function does not contain a valid number, then it returns NaN instead of a number. (Use isNaN to check that.)

Also keep in mind that in CSS, the style: margin-left: -20; is invalid. It's missing the required unit specifier, and thus will usually be ignored by the browsers. It should, presumably, be margin-left: -20px;


A NaN and 0 will not be considered equal, so it follows then that if your margin-left value is invalid and parses to a NaN, your != 0 comparison will always be true.
Was This Post Helpful? 0
  • +
  • -

#3 martynball  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 127
  • Joined: 21-July 14

Re: JavaScript if statement always true

Posted 01 August 2014 - 05:38 PM

Adjusted my code so that NaN isn't returned. It seems that the IF statement is only being run once, as you can see I added console.log(object.style.marginLeft); so that I could see what the margin is each loop, but the console log is only being displayed once, but the animation is working, but still not stopping :S

//Animation function
			function doAnimate(type, object) {
				//First define the array for effects
				var animationType = new Array();
				animationType["slide"] = ["direction", "offset", "time"];
				animationType["fade"] = ["direction", "target", "time"];
				
				//Animation type and options
				var typeName = type.split(":")[0];
				var typeOptions = type.split(":")[1].split(",");
				
				//Does the animation type exits
				if (typeof(animationType[typeName]) != "undefined") {
					//Go to the correct code
					switch(typeName) {
						case "slide":
							//Create variables for animation
							var direction = typeOptions[0];
							var offset = typeOptions[1];
							var time = typeOptions[2];
							
							//Start the slider
							var slider = function() {
								//Increase the margin
								object.style.marginLeft = (parseInt(object.style.marginLeft.replace("px", "")) + 1) + "px";
								//console.log(parseInt(object.style.marginLeft.replace("px", "")) + " " + typeof parseInt(object.style.marginLeft.replace("px", "")));
							}
							
							//Run slide function if needed
							if (parseInt(object.style.marginLeft.replace("px", "")) != 0) {
								console.log(object.style.marginLeft);
								setInterval(slider,time);
							}
							break;
						case "fade":
							
							break;
					}
				} else {
					//Animation type is invalid, may be a miss type
					console.log("Error: Animation type does not exists for object, contents: " + object.innerHTML.substr(0, 15) + "...");
				}
			}


Was This Post Helpful? 0
  • +
  • -

#4 Blindman67  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 128
  • View blog
  • Posts: 563
  • Joined: 15-March 14

Re: JavaScript if statement always true

Posted 02 August 2014 - 02:37 AM

Your problem I think is the fact that the test for the end of the end is outside the slider function and thus not being called each interval.

Try this.
    case "slide":
        //Create variables for animation
        var direction = typeOptions[0];
        var offset = typeOptions[1];
        var time = typeOptions[2];
        
         // get the position here to just speed things up a little
         // use Number() instead of parseInt it is less ambiguous
        var position = Number(object.style.marginLeft.replace("px", "")-1; 
        
        //Start the slider
        var slider = function() {
            object.style.marginLeft = position + "px";   // set position
            position -= 1;                               // move left one pixel
            if(position > 0){                            // test if at the end
                setTimeOut(slider,time);                 // set the time out.
            }
        }
        if(position > 0){               // test if it needs to be animated
            setTimeout(slider,time);    // start the animation.
        }
        break;


Was This Post Helpful? 1
  • +
  • -

#5 martynball  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 127
  • Joined: 21-July 14

Re: JavaScript if statement always true

Posted 02 August 2014 - 05:37 AM

Thanks, that works!
Was This Post Helpful? 0
  • +
  • -

#6 CasiOo  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1407
  • View blog
  • Posts: 3,123
  • Joined: 05-April 11

Re: JavaScript if statement always true

Posted 02 August 2014 - 05:59 AM

You probably want to pass a radix to the parseInt function as well
parseInt(someValue, 10);


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1