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"><</span>
<span id="right">></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
add a comment |
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"><</span>
<span id="right">></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
your code looks good .But in the timer may increase the time like 10 to 400 or 500 .
– LDS
Nov 19 at 7:07
add a comment |
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"><</span>
<span id="right">></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
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"><</span>
<span id="right">></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
javascript function parameters slider
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
add a comment |
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
add a comment |
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);
}
add a comment |
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);
}
add a comment |
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);
}
add a comment |
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);
}
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);
}
answered Nov 19 at 7:03
Sanvir Dessai
363
363
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
your code looks good .But in the timer may increase the time like 10 to 400 or 500 .
– LDS
Nov 19 at 7:07