划分两个变量给我NaN [英] Dividing two variables gives me NaN

问题描述

我正在学习javascript。我目前的代码似乎适用于总价值，但我无法得到我的部门代码来显示每人的成本是多少。

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.

这是这一行好像是问题：
document.getElementById（costeach）。innerHTML ='£'+ price_each;

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

它返回NaN但控制台没有错误。

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>

推荐答案

正如其他答案中正确陈述的那样，错误的原因是你试图用DOM元素划分数字。

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

如果我正确理解了这个意图，你就是在试图将价格除以人数。为了达到这个目的，你需要在某处指定人数。当然，您可以从选项的文本中提取此数字或从其索引中获取该数字，但更简洁的方法是在 <$ c中定义此数据$ c>数据属性，例如

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.

这篇关于划分两个变量给我NaN的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！