Javascript + / + =运算符

Question

I am having trouble with a basic movement engine I have made, where the Up key triggers a function making a small div go up, and the Down key doing the opposite. I am fairly sure it's to do with the += in the Down() function, and I have tested it with -= , which works fine, just I can't work out what might be clashing with the function.

At the bottom, I have put a comment to indicate where my problem is.

  var interval = ''; var key = false; var interval1 = ''; var key1 = false; $(document).keydown(function(e) { if(e.which === 38) { if(key === false){ interval = setInterval(function(){Up()},20) key = true; } } if(e.which === 40) { if(key1 === false){ interval1 = setInterval(function(){Down()},20) key1 = true; } } }); $(document).keyup(function(e) { if(e.which === 38) { clearInterval(interval) key = false; } if(e.which === 40) { clearInterval(interval1) key1 = false; } }); document.getElementById('Jumper').style.top = '46%'; var Top = parseInt(document.getElementById('Jumper').style.top); var Topp = parseInt(document.getElementById('Jumper').style.top); function Up(){ if(Top > 0){ Top = parseInt(document.getElementById('Jumper').style.top); Top -= 0.2; document.getElementById('Jumper').style.top = Top+'%'; } } function Down(){ if(Topp > 0){ Topp = parseInt(document.getElementById('Jumper').style.top); Topp += 0.2; //<--PROBLEM document.getElementById('Jumper').style.top = Topp+'%'; } } 

 #Jumper{ position: absolute; top: 46%; left: 48%; height: 8%; width: 4%; background-color: red; opacity: 1; } 

 <div id='Jumper'></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

Can anyone please tell me how I can fix this?

Here is a fiddle of it: https://jsfiddle.net/Tobsta/2gnoq5hx/

Answer 1

You must use parseFloat(), because parseInt returns integer ::

 Topp = parseFloat(document.getElementById('Jumper').style.top); 

https://jsfiddle.net/2gnoq5hx/3/

Answer 2

It was this line that stuffed it all up:

Topp = parseInt(document.getElementById('Jumper').style.top);

Thanks Juhana for pointing that out.

Here's the working thing:

 var interval = ''; var key = false; var interval1 = ''; var key1 = false; var interval2 = ''; var key2 = false; var interval3 = ''; var key3 = false; $(document).keydown(function(e) { if(e.which === 38) { if(key === false){ interval = setInterval(function(){Up()},20) key = true; } } if(e.which === 40) { if(key1 === false){ interval1 = setInterval(function(){Down()},20) key1 = true; } } if(e.which === 37) { if(key2 === false){ interval2 = setInterval(function(){Left()},20) key2 = true; } } if(e.which === 39) { if(key3 === false){ interval3 = setInterval(function(){Right()},20) key3 = true; } } }); $(document).keyup(function(e) { if(e.which === 38) { clearInterval(interval) key = false; } if(e.which === 40) { clearInterval(interval1) key1 = false; } if(e.which === 37) { clearInterval(interval2) key2 = false; } if(e.which === 39) { clearInterval(interval3) key3 = false; } }); document.getElementById('Jumper').style.top = '46%'; document.getElementById('Jumper').style.left = '48%'; var a = parseInt(document.getElementById('Jumper').style.top); var b = parseInt(document.getElementById('Jumper').style.left); function Up(){ if(a > 0){ a -= 1; document.getElementById('Jumper').style.top = a+'%'; } } function Down(){ if(a < 92){ a += 1; document.getElementById('Jumper').style.top = a+'%'; } } function Left(){ if(b > 0){ b -= 0.5; document.getElementById('Jumper').style.left = b+'%'; } } function Right(){ if(b < 96){ b += 0.5; document.getElementById('Jumper').style.left = b+'%'; } } 

 #Jumper{ position: absolute; top: 46%; left: 48%; height: 8%; width: 4%; background-color: red; opacity: 1; } 

 <div id='Jumper'></div> 

Or the js fiddle

http://www.jsfiddle.net/Tobsta/2gnoq5hx/2