JavaScript function, bugs associated with a function parameter











up vote
1
down vote

favorite












My apology that this question is hard to phrase, the title may be misleading. The question is basically related to passing parameters to a function in JavaScript.



These codes below are a function that allows an element to move horizontally. It's used in a slider. My question is specifically related to the two lines I commented.



I wrote the function as below in a separate .js file named common.js and it works fine:



(Note the two lines I commented)



function animateX(element, target, stepWidth) {     // the stepWidth parameter
clearInterval(element.timerId);
element.timerId = setInterval(function () {
var current = element.offsetLeft;
var step = stepWidth; // This line
step = current < target ? step : -step;
current += step;
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timerId);
element.style.left = target + "px";
}
}, 10);
}


However, if I write it in this way, there will be a bug:



The transition is gone, when I click on the arrows, the picture immediately moves to the target, instead of sliding to the target.



function animateX(element, target, step) {     // the parameter uses the same name as the local variable
clearInterval(element.timerId);
element.timerId = setInterval(function () {
var current = element.offsetLeft;
var step = step; // This line: stepWidth -> step
step = current < target ? step : -step;
current += step;
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timerId);
element.style.left = target + "px";
}
}, 10);
}


Moreover, if I write it in this way, it gets worse:



The picture will not move as planned, it will move a little bit then tremble.



function animateX(element, target, step) {          // This line
clearInterval(element.timerId);
element.timerId = setInterval(function () {
var current = element.offsetLeft;
// Now I understand why this one is wrong.
// I changed it to step = current < target ? Math.abs(step) : -Math.abs(step);
// Problem solved.
step = current < target ? step : -step;
current += step;
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timerId);
element.style.left = target + "px";
}
}, 10);
}


I totally thought these three ways are the same, but they gave me completely different results.



I also thought the third way is better because it has fewer lines. However, it doesn't work.



Can someone please explain to me the difference? I would really appreciate!



Below are the html codes, if you have time, just copy and try it. This html file and the js function are all you need for it to work. You can see the difference without pictures.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0
}

ul {
list-style: none
}

img {
vertical-align: top;
}

.box {
width: 960px;
height: 540px;
margin: 100px auto;
padding: 5px;
border: 1px solid #ccc;
}

.inner {
width: 960px;
height: 540px;
background-color: pink;
overflow: hidden;
position: relative;
}

.inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}

.inner li {
float: left;
}

#imgs li a {
width: 960px;
height: 540px;
display: block;
}

#focusD {
display: none;
}

#focusD span {
position: absolute; /* inner是relative */
width: 40px;
height: 40px;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
font-family: arial, sans-serif;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}

#focusD #right {
right: 5px;
left: auto;
}

</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<ul id="imgs">
<li><a href="#"><img src="images/d1.jpg" alt="d1"/></a></li>
<li><a href="#"><img src="images/d2.jpg" alt="d2"/></a></li>
<li><a href="#"><img src="images/d3.jpg" alt="d3"/></a></li>
<li><a href="#"><img src="images/d4.jpg" alt="d4"/></a></li>
<li><a href="#"><img src="images/d5.jpg" alt="d5"/></a></li>
</ul>
<div id="focusD">
<span id="left">&lt;</span>
<span id="right">&gt;</span>
</div>
</div>
</div>

<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
// getElementByID
function my$(id) {
return document.getElementById(id);
}
</script>
<script type="text/javascript">
var box = my$("box");
// get slider frame
var inner = box.children[0];
// get frame width
var imgWidth = inner.offsetWidth;
// get ul
var ulObj = inner.children[0];
// get div containing arrows
var focusD = my$("focusD");

// show / hide arrows
box.onmouseover = function () {
focusD.style.display = "block";
};
box.onmouseout = function () {
focusD.style.display = "none";
};

var index = 0;
// click left arrow
my$("left").onclick = function () {
if (index > 0) {
index--;
animateX(ulObj, -index * imgWidth, 20);
}
};
// click right arrow
my$("right").onclick = function () {
if (index < ulObj.children.length - 1) {
index++;
animateX(ulObj, -index * imgWidth, 20);
}
};

</script>
</body>
</html>









share|improve this question
























  • your code looks good .But in the timer may increase the time like 10 to 400 or 500 .
    – LDS
    Nov 19 at 7:07















up vote
1
down vote

favorite












My apology that this question is hard to phrase, the title may be misleading. The question is basically related to passing parameters to a function in JavaScript.



These codes below are a function that allows an element to move horizontally. It's used in a slider. My question is specifically related to the two lines I commented.



I wrote the function as below in a separate .js file named common.js and it works fine:



(Note the two lines I commented)



function animateX(element, target, stepWidth) {     // the stepWidth parameter
clearInterval(element.timerId);
element.timerId = setInterval(function () {
var current = element.offsetLeft;
var step = stepWidth; // This line
step = current < target ? step : -step;
current += step;
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timerId);
element.style.left = target + "px";
}
}, 10);
}


However, if I write it in this way, there will be a bug:



The transition is gone, when I click on the arrows, the picture immediately moves to the target, instead of sliding to the target.



function animateX(element, target, step) {     // the parameter uses the same name as the local variable
clearInterval(element.timerId);
element.timerId = setInterval(function () {
var current = element.offsetLeft;
var step = step; // This line: stepWidth -> step
step = current < target ? step : -step;
current += step;
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timerId);
element.style.left = target + "px";
}
}, 10);
}


Moreover, if I write it in this way, it gets worse:



The picture will not move as planned, it will move a little bit then tremble.



function animateX(element, target, step) {          // This line
clearInterval(element.timerId);
element.timerId = setInterval(function () {
var current = element.offsetLeft;
// Now I understand why this one is wrong.
// I changed it to step = current < target ? Math.abs(step) : -Math.abs(step);
// Problem solved.
step = current < target ? step : -step;
current += step;
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timerId);
element.style.left = target + "px";
}
}, 10);
}


I totally thought these three ways are the same, but they gave me completely different results.



I also thought the third way is better because it has fewer lines. However, it doesn't work.



Can someone please explain to me the difference? I would really appreciate!



Below are the html codes, if you have time, just copy and try it. This html file and the js function are all you need for it to work. You can see the difference without pictures.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0
}

ul {
list-style: none
}

img {
vertical-align: top;
}

.box {
width: 960px;
height: 540px;
margin: 100px auto;
padding: 5px;
border: 1px solid #ccc;
}

.inner {
width: 960px;
height: 540px;
background-color: pink;
overflow: hidden;
position: relative;
}

.inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}

.inner li {
float: left;
}

#imgs li a {
width: 960px;
height: 540px;
display: block;
}

#focusD {
display: none;
}

#focusD span {
position: absolute; /* inner是relative */
width: 40px;
height: 40px;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
font-family: arial, sans-serif;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}

#focusD #right {
right: 5px;
left: auto;
}

</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<ul id="imgs">
<li><a href="#"><img src="images/d1.jpg" alt="d1"/></a></li>
<li><a href="#"><img src="images/d2.jpg" alt="d2"/></a></li>
<li><a href="#"><img src="images/d3.jpg" alt="d3"/></a></li>
<li><a href="#"><img src="images/d4.jpg" alt="d4"/></a></li>
<li><a href="#"><img src="images/d5.jpg" alt="d5"/></a></li>
</ul>
<div id="focusD">
<span id="left">&lt;</span>
<span id="right">&gt;</span>
</div>
</div>
</div>

<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
// getElementByID
function my$(id) {
return document.getElementById(id);
}
</script>
<script type="text/javascript">
var box = my$("box");
// get slider frame
var inner = box.children[0];
// get frame width
var imgWidth = inner.offsetWidth;
// get ul
var ulObj = inner.children[0];
// get div containing arrows
var focusD = my$("focusD");

// show / hide arrows
box.onmouseover = function () {
focusD.style.display = "block";
};
box.onmouseout = function () {
focusD.style.display = "none";
};

var index = 0;
// click left arrow
my$("left").onclick = function () {
if (index > 0) {
index--;
animateX(ulObj, -index * imgWidth, 20);
}
};
// click right arrow
my$("right").onclick = function () {
if (index < ulObj.children.length - 1) {
index++;
animateX(ulObj, -index * imgWidth, 20);
}
};

</script>
</body>
</html>









share|improve this question
























  • your code looks good .But in the timer may increase the time like 10 to 400 or 500 .
    – LDS
    Nov 19 at 7:07













up vote
1
down vote

favorite









up vote
1
down vote

favorite











My apology that this question is hard to phrase, the title may be misleading. The question is basically related to passing parameters to a function in JavaScript.



These codes below are a function that allows an element to move horizontally. It's used in a slider. My question is specifically related to the two lines I commented.



I wrote the function as below in a separate .js file named common.js and it works fine:



(Note the two lines I commented)



function animateX(element, target, stepWidth) {     // the stepWidth parameter
clearInterval(element.timerId);
element.timerId = setInterval(function () {
var current = element.offsetLeft;
var step = stepWidth; // This line
step = current < target ? step : -step;
current += step;
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timerId);
element.style.left = target + "px";
}
}, 10);
}


However, if I write it in this way, there will be a bug:



The transition is gone, when I click on the arrows, the picture immediately moves to the target, instead of sliding to the target.



function animateX(element, target, step) {     // the parameter uses the same name as the local variable
clearInterval(element.timerId);
element.timerId = setInterval(function () {
var current = element.offsetLeft;
var step = step; // This line: stepWidth -> step
step = current < target ? step : -step;
current += step;
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timerId);
element.style.left = target + "px";
}
}, 10);
}


Moreover, if I write it in this way, it gets worse:



The picture will not move as planned, it will move a little bit then tremble.



function animateX(element, target, step) {          // This line
clearInterval(element.timerId);
element.timerId = setInterval(function () {
var current = element.offsetLeft;
// Now I understand why this one is wrong.
// I changed it to step = current < target ? Math.abs(step) : -Math.abs(step);
// Problem solved.
step = current < target ? step : -step;
current += step;
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timerId);
element.style.left = target + "px";
}
}, 10);
}


I totally thought these three ways are the same, but they gave me completely different results.



I also thought the third way is better because it has fewer lines. However, it doesn't work.



Can someone please explain to me the difference? I would really appreciate!



Below are the html codes, if you have time, just copy and try it. This html file and the js function are all you need for it to work. You can see the difference without pictures.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0
}

ul {
list-style: none
}

img {
vertical-align: top;
}

.box {
width: 960px;
height: 540px;
margin: 100px auto;
padding: 5px;
border: 1px solid #ccc;
}

.inner {
width: 960px;
height: 540px;
background-color: pink;
overflow: hidden;
position: relative;
}

.inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}

.inner li {
float: left;
}

#imgs li a {
width: 960px;
height: 540px;
display: block;
}

#focusD {
display: none;
}

#focusD span {
position: absolute; /* inner是relative */
width: 40px;
height: 40px;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
font-family: arial, sans-serif;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}

#focusD #right {
right: 5px;
left: auto;
}

</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<ul id="imgs">
<li><a href="#"><img src="images/d1.jpg" alt="d1"/></a></li>
<li><a href="#"><img src="images/d2.jpg" alt="d2"/></a></li>
<li><a href="#"><img src="images/d3.jpg" alt="d3"/></a></li>
<li><a href="#"><img src="images/d4.jpg" alt="d4"/></a></li>
<li><a href="#"><img src="images/d5.jpg" alt="d5"/></a></li>
</ul>
<div id="focusD">
<span id="left">&lt;</span>
<span id="right">&gt;</span>
</div>
</div>
</div>

<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
// getElementByID
function my$(id) {
return document.getElementById(id);
}
</script>
<script type="text/javascript">
var box = my$("box");
// get slider frame
var inner = box.children[0];
// get frame width
var imgWidth = inner.offsetWidth;
// get ul
var ulObj = inner.children[0];
// get div containing arrows
var focusD = my$("focusD");

// show / hide arrows
box.onmouseover = function () {
focusD.style.display = "block";
};
box.onmouseout = function () {
focusD.style.display = "none";
};

var index = 0;
// click left arrow
my$("left").onclick = function () {
if (index > 0) {
index--;
animateX(ulObj, -index * imgWidth, 20);
}
};
// click right arrow
my$("right").onclick = function () {
if (index < ulObj.children.length - 1) {
index++;
animateX(ulObj, -index * imgWidth, 20);
}
};

</script>
</body>
</html>









share|improve this question















My apology that this question is hard to phrase, the title may be misleading. The question is basically related to passing parameters to a function in JavaScript.



These codes below are a function that allows an element to move horizontally. It's used in a slider. My question is specifically related to the two lines I commented.



I wrote the function as below in a separate .js file named common.js and it works fine:



(Note the two lines I commented)



function animateX(element, target, stepWidth) {     // the stepWidth parameter
clearInterval(element.timerId);
element.timerId = setInterval(function () {
var current = element.offsetLeft;
var step = stepWidth; // This line
step = current < target ? step : -step;
current += step;
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timerId);
element.style.left = target + "px";
}
}, 10);
}


However, if I write it in this way, there will be a bug:



The transition is gone, when I click on the arrows, the picture immediately moves to the target, instead of sliding to the target.



function animateX(element, target, step) {     // the parameter uses the same name as the local variable
clearInterval(element.timerId);
element.timerId = setInterval(function () {
var current = element.offsetLeft;
var step = step; // This line: stepWidth -> step
step = current < target ? step : -step;
current += step;
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timerId);
element.style.left = target + "px";
}
}, 10);
}


Moreover, if I write it in this way, it gets worse:



The picture will not move as planned, it will move a little bit then tremble.



function animateX(element, target, step) {          // This line
clearInterval(element.timerId);
element.timerId = setInterval(function () {
var current = element.offsetLeft;
// Now I understand why this one is wrong.
// I changed it to step = current < target ? Math.abs(step) : -Math.abs(step);
// Problem solved.
step = current < target ? step : -step;
current += step;
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timerId);
element.style.left = target + "px";
}
}, 10);
}


I totally thought these three ways are the same, but they gave me completely different results.



I also thought the third way is better because it has fewer lines. However, it doesn't work.



Can someone please explain to me the difference? I would really appreciate!



Below are the html codes, if you have time, just copy and try it. This html file and the js function are all you need for it to work. You can see the difference without pictures.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0
}

ul {
list-style: none
}

img {
vertical-align: top;
}

.box {
width: 960px;
height: 540px;
margin: 100px auto;
padding: 5px;
border: 1px solid #ccc;
}

.inner {
width: 960px;
height: 540px;
background-color: pink;
overflow: hidden;
position: relative;
}

.inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}

.inner li {
float: left;
}

#imgs li a {
width: 960px;
height: 540px;
display: block;
}

#focusD {
display: none;
}

#focusD span {
position: absolute; /* inner是relative */
width: 40px;
height: 40px;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
font-family: arial, sans-serif;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}

#focusD #right {
right: 5px;
left: auto;
}

</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<ul id="imgs">
<li><a href="#"><img src="images/d1.jpg" alt="d1"/></a></li>
<li><a href="#"><img src="images/d2.jpg" alt="d2"/></a></li>
<li><a href="#"><img src="images/d3.jpg" alt="d3"/></a></li>
<li><a href="#"><img src="images/d4.jpg" alt="d4"/></a></li>
<li><a href="#"><img src="images/d5.jpg" alt="d5"/></a></li>
</ul>
<div id="focusD">
<span id="left">&lt;</span>
<span id="right">&gt;</span>
</div>
</div>
</div>

<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
// getElementByID
function my$(id) {
return document.getElementById(id);
}
</script>
<script type="text/javascript">
var box = my$("box");
// get slider frame
var inner = box.children[0];
// get frame width
var imgWidth = inner.offsetWidth;
// get ul
var ulObj = inner.children[0];
// get div containing arrows
var focusD = my$("focusD");

// show / hide arrows
box.onmouseover = function () {
focusD.style.display = "block";
};
box.onmouseout = function () {
focusD.style.display = "none";
};

var index = 0;
// click left arrow
my$("left").onclick = function () {
if (index > 0) {
index--;
animateX(ulObj, -index * imgWidth, 20);
}
};
// click right arrow
my$("right").onclick = function () {
if (index < ulObj.children.length - 1) {
index++;
animateX(ulObj, -index * imgWidth, 20);
}
};

</script>
</body>
</html>






javascript function parameters slider






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 20 at 4:01

























asked Nov 19 at 6:10









Reynard Hao

62




62












  • your code looks good .But in the timer may increase the time like 10 to 400 or 500 .
    – LDS
    Nov 19 at 7:07


















  • your code looks good .But in the timer may increase the time like 10 to 400 or 500 .
    – LDS
    Nov 19 at 7:07
















your code looks good .But in the timer may increase the time like 10 to 400 or 500 .
– LDS
Nov 19 at 7:07




your code looks good .But in the timer may increase the time like 10 to 400 or 500 .
– LDS
Nov 19 at 7:07












1 Answer
1






active

oldest

votes

















up vote
0
down vote













In the second iteration of your function, you create a variable called 'step', which is the same name as one of the function parameters. In the third iteration, you do not create the copy of 'stepWidth' that you need for your function to work. Try creating a variable with a different name to store your copy of 'step'.



function animateX(element, target, step) {         
clearInterval(element.timerId);
element.timerId = setInterval(function () {
var current = element.offsetLeft;
var stepWidth = step;
stepWidth = current < target ? stepWidth : -stepWidth;
current += stepWidth;
if (Math.abs(target - current) > Math.abs(stepWidth)) {
element.style.left = current + "px";
} else {
clearInterval(element.timerId);
element.style.left = target + "px";
}
}, 10);


}






share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53369181%2fjavascript-function-bugs-associated-with-a-function-parameter%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    0
    down vote













    In the second iteration of your function, you create a variable called 'step', which is the same name as one of the function parameters. In the third iteration, you do not create the copy of 'stepWidth' that you need for your function to work. Try creating a variable with a different name to store your copy of 'step'.



    function animateX(element, target, step) {         
    clearInterval(element.timerId);
    element.timerId = setInterval(function () {
    var current = element.offsetLeft;
    var stepWidth = step;
    stepWidth = current < target ? stepWidth : -stepWidth;
    current += stepWidth;
    if (Math.abs(target - current) > Math.abs(stepWidth)) {
    element.style.left = current + "px";
    } else {
    clearInterval(element.timerId);
    element.style.left = target + "px";
    }
    }, 10);


    }






    share|improve this answer

























      up vote
      0
      down vote













      In the second iteration of your function, you create a variable called 'step', which is the same name as one of the function parameters. In the third iteration, you do not create the copy of 'stepWidth' that you need for your function to work. Try creating a variable with a different name to store your copy of 'step'.



      function animateX(element, target, step) {         
      clearInterval(element.timerId);
      element.timerId = setInterval(function () {
      var current = element.offsetLeft;
      var stepWidth = step;
      stepWidth = current < target ? stepWidth : -stepWidth;
      current += stepWidth;
      if (Math.abs(target - current) > Math.abs(stepWidth)) {
      element.style.left = current + "px";
      } else {
      clearInterval(element.timerId);
      element.style.left = target + "px";
      }
      }, 10);


      }






      share|improve this answer























        up vote
        0
        down vote










        up vote
        0
        down vote









        In the second iteration of your function, you create a variable called 'step', which is the same name as one of the function parameters. In the third iteration, you do not create the copy of 'stepWidth' that you need for your function to work. Try creating a variable with a different name to store your copy of 'step'.



        function animateX(element, target, step) {         
        clearInterval(element.timerId);
        element.timerId = setInterval(function () {
        var current = element.offsetLeft;
        var stepWidth = step;
        stepWidth = current < target ? stepWidth : -stepWidth;
        current += stepWidth;
        if (Math.abs(target - current) > Math.abs(stepWidth)) {
        element.style.left = current + "px";
        } else {
        clearInterval(element.timerId);
        element.style.left = target + "px";
        }
        }, 10);


        }






        share|improve this answer












        In the second iteration of your function, you create a variable called 'step', which is the same name as one of the function parameters. In the third iteration, you do not create the copy of 'stepWidth' that you need for your function to work. Try creating a variable with a different name to store your copy of 'step'.



        function animateX(element, target, step) {         
        clearInterval(element.timerId);
        element.timerId = setInterval(function () {
        var current = element.offsetLeft;
        var stepWidth = step;
        stepWidth = current < target ? stepWidth : -stepWidth;
        current += stepWidth;
        if (Math.abs(target - current) > Math.abs(stepWidth)) {
        element.style.left = current + "px";
        } else {
        clearInterval(element.timerId);
        element.style.left = target + "px";
        }
        }, 10);


        }







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 19 at 7:03









        Sanvir Dessai

        363




        363






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53369181%2fjavascript-function-bugs-associated-with-a-function-parameter%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Wiesbaden

            Marschland

            Dieringhausen