8 Replies - 2057 Views - Last Post: 27 December 2012 - 01:33 PM

#1 makamo66  Icon User is offline

  • New D.I.C Head

Reputation: -5
  • View blog
  • Posts: 42
  • Joined: 04-February 09

How to force addition instead of concatenation in javascript

Posted 19 December 2012 - 06:57 AM

I'm trying to add all of the calorie contents in my javascript like this:

total = parseFloat(myInt1 + myInt2 + myInt3);
$('#response').append(total);


Instead of adding the variables they get concatenated. I've tried using parseInt, parseFloat, and Number but I still just get concatenation and not addition. Please look at the view source at http://maureenmoore....121912_800.html

Is This A Good Question/Topic? 0
  • +

Replies To: How to force addition instead of concatenation in javascript

#2 Sho Ke  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 110
  • View blog
  • Posts: 250
  • Joined: 13-October 11

Re: How to force addition instead of concatenation in javascript

Posted 19 December 2012 - 07:23 AM

Well, parseFloat(myInt1 + myInt2 + myInt3) is just parsing the result of myInt1+myInt2+myInt3 to float. In order to add variables together(not concat), all of the variables in question must be integers or floats. Consider the following:
var myInt1 = "15";
var myInt2 = "20";
console.log(myInt1+myInt2);
console.log(parseFloat(myInt1+myInt2));
console.log(parseFloat(myInt1)+parseFloat(myInt2));


Was This Post Helpful? 0
  • +
  • -

#3 SpAm101  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 54
  • Joined: 28-November 12

Re: How to force addition instead of concatenation in javascript

Posted 19 December 2012 - 07:24 AM

Hi makamo66

Is this what you're looking for? Code should be fixed, but I haven't tested it cross browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Own Meal Planner</title>
	<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
	<script type="text/javascript" src="js/ui-1.9.1-jquery-ui.js"></script>
	<script type="text/javascript">
  $(function() {
	var total = 0;
	
        $( "#draggable1" ).draggable();
		$( "#draggable2" ).draggable();
		$( "#draggable3" ).draggable();

    $("#droppable_box").droppable({
        drop: function(event, ui) {
		
			if($(ui.draggable).hasClass("rightSide"))//If already on the right do nothing
			{
				return true;
			}
			else
			{
				$(ui.draggable).removeClass("leftSide");
				$(ui.draggable).addClass("rightSide");
		
				var currentID = $(ui.draggable).attr('id');

				if(currentID == "draggable1"){
					total += parseFloat($('#MealplanCalsPerServing1').val());
				}
				if(currentID == "draggable2"){
					total += parseFloat($('#MealplanCalsPerServing2').val());
				}
				if(currentID == "draggable3"){
					total += parseFloat($('#MealplanCalsPerServing3').val());
				}

				$('#response').html(total);
			}
        }
    });
	
	
	    $("#draggables_box").droppable({
        drop: function(event, ui) {
			
			if($(ui.draggable).hasClass("leftSide"))//If already on the left do nothing
			{ 
				return true;
			}
			else
			{
				$(ui.draggable).removeClass("rightSide");
				$(ui.draggable).addClass("leftSide");
			
				var currentId = $(ui.draggable).attr('id');
				
				if(currentId == "draggable1"){
					total -= parseFloat($('#MealplanCalsPerServing1').val());
				}
				if(currentId == "draggable2"){
					total -= parseFloat($('#MealplanCalsPerServing2').val());
				}
				if(currentId == "draggable3"){
					total -= parseFloat($('#MealplanCalsPerServing3').val());
				}
						
				$('#response').html(total);
			}
        }
    });
	
	
	
	
	$('#myId').click(function(event) {
        $.post("process.php", ({ id: data }), function(return_data, status) {
            alert(data);
			//alert(total);
        });
    });
});
</script>


<link rel="stylesheet" type="text/css" href="css/myownmealplanner.css" />
</head>

<body>

<form action="/mealplans/add" id="MealplanAddForm" method="post" accept-charset="utf-8">
<br />
<div id="containing_box">
<div id="draggables_box">

<!-- begin of draggable div-->
<div id="draggable1" class="draggable_meal">
<div class="calorie_icon">320 CALS</div>
<input type="hidden" name="MealplanCalsPerServing1" id="MealplanCalsPerServing1" value="320" />
<span>large fries</span>
</div><!-- end of draggable div-->

<!-- begin of draggable div-->
<div id="draggable2" class="draggable_meal">
<div class="calorie_icon">280 CALS</div>
<input type="hidden" name="MealplanCalsPerServing2" id="MealplanCalsPerServing2" value="280" />
<span>1/2 a bagel with cream cheese and jam</span>
</div><!-- end of draggable div-->

<!-- begin of draggable div-->
<div id="draggable3" class="draggable_meal">
<div class="calorie_icon">330 CALS</div>
<input type="hidden" name="MealplanCalsPerServing3" id="MealplanCalsPerServing3" value="330" />
<span>McDonald's cheeseburger</span>
</div><!-- end of draggable div-->

</div><!--end div for draggables_box -->

<div id="droppable_box">
<div id="response"></div> 
<p>Drop a meal tile here.</p>

</div>
</div>
<br style="clear:all;" />
<input type="button" id="myId" name="myButton" value="Submit" />

</form>

</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#4 makamo66  Icon User is offline

  • New D.I.C Head

Reputation: -5
  • View blog
  • Posts: 42
  • Joined: 04-February 09

Re: How to force addition instead of concatenation in javascript

Posted 19 December 2012 - 12:46 PM

Are you sure that isn't unnecessarily complicated? It seems to me that the solution should be much more simple than that. Thanks just the same.
Was This Post Helpful? 0
  • +
  • -

#5 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6078
  • View blog
  • Posts: 23,546
  • Joined: 23-August 08

Re: How to force addition instead of concatenation in javascript

Posted 19 December 2012 - 01:12 PM

FYI, so people don't waste time once again. Unless you want to be part of the "competition".
Was This Post Helpful? 1
  • +
  • -

#6 SpAm101  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 54
  • Joined: 28-November 12

Re: How to force addition instead of concatenation in javascript

Posted 19 December 2012 - 03:20 PM

View PostJackOfAllTrades, on 19 December 2012 - 01:12 PM, said:

FYI, so people don't waste time once again. Unless you want to be part of the "competition".



Urgh, I knew there was a reason he was -4 rep, but I thought I'd give him the benefit of the doubt <_<

Thanks Jack :)
Was This Post Helpful? 0
  • +
  • -

#7 makamo66  Icon User is offline

  • New D.I.C Head

Reputation: -5
  • View blog
  • Posts: 42
  • Joined: 04-February 09

Re: How to force addition instead of concatenation in javascript

Posted 19 December 2012 - 03:34 PM

The problem was solved by axrwkr at stackoverflow:

http://stackoverflow...n-in-javascript
Was This Post Helpful? 0
  • +
  • -

#8 SpAm101  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 54
  • Joined: 28-November 12

Re: How to force addition instead of concatenation in javascript

Posted 19 December 2012 - 03:58 PM

View Postmakamo66, on 19 December 2012 - 12:46 PM, said:

Are you sure that isn't unnecessarily complicated? It seems to me that the solution should be much more simple than that. Thanks just the same.


That's because the code I gave you has added functionality. In your current code, if you drag one over, and click the same draggable item and drop it in the same side, the total goes up again when it shouldn't. Also, when you move it back again, the total doesn't go down.

I added the functionality so that you can move th items between the two areas and the total changes accordingly.

This post has been edited by SpAm101: 19 December 2012 - 03:59 PM

Was This Post Helpful? 1
  • +
  • -

#9 makamo66  Icon User is offline

  • New D.I.C Head

Reputation: -5
  • View blog
  • Posts: 42
  • Joined: 04-February 09

Re: How to force addition instead of concatenation in javascript

Posted 27 December 2012 - 01:33 PM

Thanks SpAm101 I will try to implement your code soon.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1