Javascript variables not adding two variables correctly, only concatenating

Question

I am creating an seat booking page with html/javascript.

This is part of the criteria I am working on:

When Passengers 1 to 4, Add £0.10 to Fare per mile
When number of miles is less than or equal to 10, then Fare per mile is £1.-

The problem is, is that when I try to add together the total cost + cost for passengers, it concatenates the variable (tried it both ways).

Any help would be greatly appreciated.

function MyFunction() {
  var x, text, passengers, passengerresponse, cost;

  miles = document.getElementById("miles").value;
  
  if (isNaN(miles) || miles < 1) {
    text = "Input not valid";
  } else if (miles <= 10) {
    cost = miles;
  }
  
  document.getElementById("miles2").innerHTML = miles;

  passengers = document.getElementById("passengers").value;

  if (passengers >= 1 && passengers <= 4) {
    passengerresponse = "OK";
    cost += passengers / 10;
  }
  document.getElementById("passengers2").innerHTML = passengers;
  document.getElementById("totalcost").innerHTML = cost;
}

Journey in miles:
<input id="miles" type="number">
<p id="miles2"></p>

Number of passengers:
<input id="passengers" type="number">
<p id="passengers2"></p>

<button type="button" onclick="MyFunction()">Submit</button>

Total cost:
<p id="totalcost"></p>

Before you do anything else, please, *indent your code*. Working with all left-aligned code should be a punishable offense, giving unindented code to other people doubly so. — Tomalak, Feb 22 '15 at 19:06

score 1 · Answer 1 · edited May 23 '17 at 12:12

1

passengers is a string, not a number. You're doing the same thing as saying cost = 'Santa' + 'Claus'; The fact that it's cost = '1' + '4'; doesn't change the '1' and '4' to a 1 and 4.

The solution is to use parseInt, Number, or one of the method from this answer.

edited May 23 '17 at 12:12

Community

1
1

answered Feb 22 '15 at 19:06

David Thielen

28,723
34
119
193

Thanks, but I can't see where I have stated passengers is a string. – Jonny Feb 22 '15 at 19:11
1

`passengers = document.getElementById("passengers").value;` return a string. You'll want to use [parseInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt). (`passengers = parseInt(document.getElementById("passengers").value);`) – Dave Salomon Feb 22 '15 at 19:13
miles is also a string – epascarello Feb 22 '15 at 19:14
To confirm what they're saying, run `typeof` on your variables. `typeof passengers` – 5tormTrooper Feb 22 '15 at 19:16

THEtheChad · Answer 2 · 2015-02-22T19:19:51.473

Cost is undefined if you put any miles in greater than 10. When you add undefined to the number of passengers, the result is Not a Number (NaN).

Also, I would recommend you use parseInt on the data you're retrieving from the inputs. Right now you're pulling them in as strings and doing math on them, which only works because Javascript has been smart enough to implicitly cast them as numeric where necessary.

function MyFunction()
{
    var x, text, passengers, passengerresponse, cost;

    miles = document.getElementById("miles").value; // miles is a string
    miles = parseInt(miles, 10); // convert to numeric base 10
    if (isNaN(miles) || miles < 1)
    {
        text = "Input not valid";
    }
    else if (miles <= 10)
    {
        cost = miles;
    }
    // if miles > 10, cost is undefined
    if(!cost) cost = 0;

    document.getElementById("miles2").innerHTML = miles;



    passengers = document.getElementById("passengers").value; // passengers is a string
    passengers = parseInt(passengers, 10); // convert passengers to a number

    if (passengers >= 1 && passengers <= 4 )
    {
        passengerresponse = "OK";
        console.log(cost, passengers);
        cost += passengers / 10;
    }
    document.getElementById("passengers2").innerHTML = passengers;
    document.getElementById("totalcost").innerHTML = cost;
}

score 0 · Answer 3 · answered Feb 22 '15 at 19:17

You should convert passengers to numerical value.

Method 1 + unary oprerator

  passengers = +document.getElementById("passengers").value;

Method 2 parseInt()

passengers = +document.getElementById("passengers").value;
passengers = parseInt(passengers, 10);

Javascript variables not adding two variables correctly, only concatenating

3 Answers3

Linked

Related