parseFloat（）不工作

Question

我想知道我做错了什么？我试图将一些数字放入javascript vars并添加它们但是当我取消注释打印值的行时它们都是NaN。

<div id="priceDisplayPoolHeating">8.00</div>
<div id="priceDisplayPetFee">7.00</div>
<div id="priceDisplayPropertyDamageProtection">4.00</div>
<div id="priceDisplayVacationPackageTotal">9.80</div>

function recalculateGrandTotal() {
  var alreadySetCosts = 30.00;

  var thePoolHeatingFeeRounded = parseFloat(document.getElementById("priceDisplayPoolHeating").value);
  var thePetFeeRounded = parseFloat(document.getElementById("priceDisplayPetFee").value);
  var thePropertyDamageProtectionFeeRounded = parseFloat(document.getElementById("priceDisplayPropertyDamageProtection").value);

  var theGrandTotal = alreadySetCosts + thePoolHeatingFeeRounded + thePetFeeRounded + thePropertyDamageProtectionFeeRounded;

  document.getElementById("priceDisplayVacationPackageTotal").innerHTML = theGrandTotal;
  document.write('<br/>The Vars: ' + alreadySetCosts + '<br/>' + thePoolHeatingFeeRounded + '<br/>' + thePetFeeRounded + '<br/>' + thePropertyDamageProtectionFeeRounded + '<br/>' + theGrandTotal);
}

Answer 1

您正在尝试访问元素的值属性...

document.getElementById("priceDisplayPropertyDamageProtection").value

您需要textContent：

document.getElementById("priceDisplayPropertyDamageProtection").textContent

我希望有帮助吗？

Answer 2

这是因为div标签没有value。

<div id="priceDisplayPoolHeating" class="priceDisplay">8.00</div>

您必须使用以下代码更改JS行：

document.getElementById("priceDisplayPoolHeating").value

改为获取文字：

document.getElementById("priceDisplayPoolHeating").innerHTML

当您进行调试时，您应该尝试查看document.getElementById("priceDisplayPoolHeating").value等值中包含的内容。如果你已经这样做了，你会看到它返回undefined而parseFloat(undefined);返回NaN。