Reputation: 6988
I am trying to make a submit button that when it is clicked then the image will move and another button that when it is clicked the image will reset.
Somehow if I do it with onclick
function and the image will move and things are good, but if I use it with onsubmit
function then it wouldn't work. Anyone can give me an idea why?
This is what I have for my script:
function catMoveRight()
{
document.getElementById("cat").style.left=parseInt(document.getElementById("cat").style.left)+1+"px";
}
window.onload=function()
{
catTimer = null;
document.getElementById("start").onsubmit=function()
{
if(catTimer == null)
{
catTimer = setInterval("catMoveRight()",1000);
}
}
}
This is my HTML body
:
<img src="cat.jpg" id="cat" style=" position: absolute; left: 10px;"/><br/>
<form action=" " method="post" id="start">
<input type="submit" value="Start" style="position: absolute; left: 10px; top: 220px;" />
</form>
Upvotes: 0
Views: 2498
Reputation: 126082
Make sure to cancel the default action of the form submit. One way is to return false
from the event handler:
document.getElementById("start").onsubmit = function()
{
if(catTimer == null)
{
catTimer = setInterval(catMoveRight, 1000);
}
return false;
};
Also there's no need to pass a string to setInterval
. Don't use eval
where it's not necessary.
Example: http://jsfiddle.net/QD3ev/1/
Upvotes: 4