Question

我正在学习javascript。我目前的代码似乎适用于总价值，但我不能让我的部门代码工作以显示每人的成本是多少。

这条线似乎是问题所在： document.getElementById（“costeach”）。innerHTML ='£'+ price_each;

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

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>

Answer 1

您正在通过DOM元素潜水一个字符串：

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

// ...

var price_each = (price / a);

虽然字符串可以自动转换为数字，但DOM元素却不能。

Answer 2

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

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

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

然后，您可以提取人数并按照以下方式进行划分：

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

其余代码保持不变。的 See fiddle.

使用这种方法，您不需要使选项的文本或标题机器可读，实际的数据（人数）将保持独立于表示。例如。如果您将文本更改为“一个人”，“两个人”等，代码仍然有效。

Answer 3

有关详细信息，请参阅@Timo answer。

您需要更改：

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

但是我强烈建议不要这样做，如果你创建一个javascript对象，其中包含人数和成本，并从那里获取值，那就更好了。

Answer 4

我已经查看了你的JSFiddle，问题是你用作数量的值是一个字符串

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

在选项中进行此更改后，请在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;

划分两个变量给我NaN

4 个答案: