CODEWITHSUNDEEP
javascript
Jimmy
Jimmy

Reputation: 12487

Dividing two variables gives me NaN

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>

Upvotes: 2

Views: 1806

Answers (4)

Alex Shesterov
Alex Shesterov

Reputation: 27525

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.

Upvotes: 2

Jorge Quevedo
Jorge Quevedo

Reputation: 36

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;

Upvotes: 1

Peter
Peter

Reputation: 1822

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.

Upvotes: 1

TimoStaudinger
TimoStaudinger

Reputation: 42460

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.

Upvotes: 4

Related Questions