Javascript +/+= Operator

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/

parseInt won't work a) because you're using it wrong (add a base, e.g. parseInt(string, 10) and b) because your string is probably in the wrong format. — ArtOfCode
– ArtOfCode, Commented Mar 7, 2015 at 9:57
@ArtOfCode I know how to use parseInt, but what do you mean by my string being in the wrong format? — Oliver
– Oliver, Commented Mar 7, 2015 at 10:00
parseInt() returns an integer, as the name suggests. If you add only 0.2 to the value it will always round it down and undo the previous change (e.g. 10 + 0.2 = 10.2, parseInt(10.2) = 10). — JJJ
– JJJ, Commented Mar 7, 2015 at 10:01
The reason why it looks like it works with Up() is that in practice it takes away 1 instead of 0.2 (e.g. 10 - 0.2 = 9.8, parseInt(9.8) = 9). — JJJ
– JJJ, Commented Mar 7, 2015 at 10:03
I don't understand why you even retrieve the value from the element's style when you already store it neatly in a variable. jsfiddle.net/2gnoq5hx/1 — JJJ
– JJJ, Commented Mar 7, 2015 at 10:09

gwer · Accepted Answer · 2015-03-07 11:12:34Z

3

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

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

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

answered Mar 7, 2015 at 11:12

gwer

6143 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oliver · Accepted Answer · 2015-03-08 04:39:12Z

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

Collectives™ on Stack Overflow

Javascript +/+= Operator

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related