I'm learning javascript. My current code seems to work for the total value, but I can't get my division code to work to show how much it's costing per person.

It's this line which seems to be the issue: document.getElementById("costeach").innerHTML = '£' + price_each;

It returns NaN but no errors in console.

var a = document.getElementById("quantity");
var price = a.options[a.selectedIndex].value;
var b = document.getElementById("method");
var type = b.options[b.selectedIndex].value;

if (type == 'credit') {
var price = price * 1.034;
}

var price_each = (price / a);

document.getElementById("cost").innerHTML = '£' + price;
document.getElementById("costeach").innerHTML = '£' + price_each;

.container {
  display: inline-block;
  position: relative;
  width: 200px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.6;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
}

.container .overlay {
  opacity: 1;
}

button {
  padding: 10px 15px;
  cursor: pointer;
}

.text {
  color: black;
  font-family: arial;
  font-size: 50px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

span {
  display: block;
  font-size: 12px;
}

<h4>
Booking Form
</h4>
<select id="quantity" name=''>
  <option title='Option 2' value='240'>2 people</option>
  <option title='Option 3' value='330'>3 people</option>
  <option title='Option 4' value='400'>4 people</option>
  <option title='Option 3' value='500'>5 people</option>
  <option title='Option 4' value='600'>6 people</option>
</select>
<br /> Paypal Funding Method
<br />
<select id="method" name=''>
  <option title='Option 1' value='bank'>Bank Transfer</option>
  <option title='Option 2' value='debit'>Debit Card</option>
  <option title='Option 3' value='credit'>Credit card (+3.4%)</option>
</select>
<br />
<textarea placeholder="Guest names"></textarea>
<br />
<h4>
<b>Total Price</b>
<span id="cost">Hello World!</span>
<b>Price Each</b>
<span id="costeach">Hello World!</span>
</h4>
<button>
  Book
</button>

I'm learning javascript. My current code seems to work for the total value, but I can't get my division code to work to show how much it's costing per person.

It's this line which seems to be the issue: document.getElementById("costeach").innerHTML = '£' + price_each;

It returns NaN but no errors in console.

var a = document.getElementById("quantity");
var price = a.options[a.selectedIndex].value;
var b = document.getElementById("method");
var type = b.options[b.selectedIndex].value;

if (type == 'credit') {
var price = price * 1.034;
}

var price_each = (price / a);

document.getElementById("cost").innerHTML = '£' + price;
document.getElementById("costeach").innerHTML = '£' + price_each;

.container {
  display: inline-block;
  position: relative;
  width: 200px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.6;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
}

.container .overlay {
  opacity: 1;
}

button {
  padding: 10px 15px;
  cursor: pointer;
}

.text {
  color: black;
  font-family: arial;
  font-size: 50px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

span {
  display: block;
  font-size: 12px;
}

<h4>
Booking Form
</h4>
<select id="quantity" name=''>
  <option title='Option 2' value='240'>2 people</option>
  <option title='Option 3' value='330'>3 people</option>
  <option title='Option 4' value='400'>4 people</option>
  <option title='Option 3' value='500'>5 people</option>
  <option title='Option 4' value='600'>6 people</option>
</select>
<br /> Paypal Funding Method
<br />
<select id="method" name=''>
  <option title='Option 1' value='bank'>Bank Transfer</option>
  <option title='Option 2' value='debit'>Debit Card</option>
  <option title='Option 3' value='credit'>Credit card (+3.4%)</option>
</select>
<br />
<textarea placeholder="Guest names"></textarea>
<br />
<h4>
<b>Total Price</b>
<span id="cost">Hello World!</span>
<b>Price Each</b>
<span id="costeach">Hello World!</span>
</h4>
<button>
  Book
</button>

• javascript

Share Improve this question Follow edited Jan 30, 2018 at 21:24 Scott Marcus 65.9k66 gold badges5454 silver badges8080 bronze badges asked Jan 30, 2018 at 21:23 JimmyJimmy 12.5k2929 gold badges114114 silver badges206206 bronze badges 12

• 1 All values gotten from HTML are strings. Strings are not numbers. You must test the values first and then convert them to numbers before you do math. – Scott Marcus Commented Jan 30, 2018 at 21:23
• 2 @ScottMarcus Strings are automatically converted to numbers when you use arithmetic operators on them. – Barmar Commented Jan 30, 2018 at 21:24
• 2 @ScottMarcus Try "1" / "2" – TimoStaudinger Commented Jan 30, 2018 at 21:26
• 2 What are you expecting price / a to do? a isn't a number. I suspect you're using the wrong variable there. – Barmar Commented Jan 30, 2018 at 21:27
• 2 @ScottMarcus Since none of his values are empty strings, the scenario is not relevant. The problem has nothing to do with the string values, it's that he's dividing by something that isn't a string or number at all. – Barmar Commented Jan 30, 2018 at 21:29

 |  Show 7 more ments

4 Answers 4

Sorted by: Reset to default 4

You are diving a string by a DOM element:

var a = document.getElementById("quantity");

// ...

var price_each = (price / a);

While the string can automatically be converted to a number, the DOM element can't.

As correctly stated in other answers, the reason of the bug is that you are trying to divide a number by a DOM element.

If I correctly understand the intention, you are trying to divide the price by the number of people. In order to achieve this, you need to specify the number of people somewhere. Of course, you could extract this number from the option's text or derive it from its index, but a cleaner approach is to define this data in data attributes, e.g.

<option title='Option 2' value='240' data-num-persons='2'>2 people</option>
<option title='Option 3' value='330' data-num-persons='3'>3 people</option>
<option title='Option 4' value='400' data-num-persons='4'>4 people</option>

Then, you could extract the number of people and do the division like this:

var number_of_people = a.options[a.selectedIndex].getAttribute('data-num-persons');
var price_each = (price / number_of_people);

The rest of your code remains the same. See fiddle.

With this approach, you don't need to make the options' texts nor titles machine-readable, the actual data (number of persons) would remain independent of the representation. E.g. if you would change the texts to "One person", "Two persons" and so on, the code would still work.

See @Timo answer for the details.

You need to change:

var price_each = (price / a); to var price_each = (price / (a.selectedIndex + 1));

But I strongly suggest to don't do this way, it is better if you create a javascript object with people number an there cost, and get values from there.

I have already reviewed your JSFiddle and the problem is that the value that you are using as quantity was a String

<select id="quantity" name=''>
  <option title='Option 2' value='240'>2 </option>
  <option title='Option 3' value='330'>3 </option>
  <option title='Option 4' value='400'>4 </option>
  <option title='Option 3' value='500'>5 </option>
  <option title='Option 4' value='600'>6 </option>
</select>

After this change in the options, change this in the js:

var a = document.getElementById("quantity");
var price = a.options[a.selectedIndex].value;
var quantity2 = a.options[a.selectedIndex].innerHTML;
var b = document.getElementById("method");
var type = b.options[b.selectedIndex].value;

if (type == 'credit') {
 var price = price * 1.034;
}

var price_each = (price / quantity2);

document.getElementById("cost").innerHTML = '£' + price;
document.getElementById("costeach").innerHTML = '£' + price_each;