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
– Tomalak, Commented Feb 22, 2015 at 19:06

Community · Accepted Answer · 2017-05-23 12:12:40Z

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, 2017 at 12:12

CommunityBot

11 silver badge

answered Feb 22, 2015 at 19:06

David Thielen

33.7k42 gold badges158 silver badges293 bronze badges

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

4 Comments

Jonny Over a year ago

Thanks, but I can't see where I have stated passengers is a string.

Dave Salomon Over a year ago

passengers = document.getElementById("passengers").value; return a string. You'll want to use parseInt. (passengers = parseInt(document.getElementById("passengers").value);)

epascarello Over a year ago

miles is also a string

5tormTrooper Over a year ago

To confirm what they're saying, run typeof on your variables. typeof passengers

void · Accepted Answer · 2015-02-22 19:17:03Z

0

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);

answered Feb 22, 2015 at 19:17

void

36.7k10 gold badges71 silver badges111 bronze badges

Comments

THEtheChad · Accepted Answer · 2015-02-22 19:19:51Z

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;
}

Collectives™ on Stack Overflow

Javascript variables not adding two variables correctly, only concatenating

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related