Javascript - 返回NaN

Question

我有一个我想要做的表单，如果有人在表单的文本字段中输入文本，然后点击提交，我想向他显示我持续获得的标志（charactercount x price）的费用{ {1}}！

继承人我的Html：

NaN

这是我的Javascript

<section class="sign" id="sign">
<h3 class="sign_header">CUSTOM SIGNAGE</h3>
<p class="sign_text">Enter Name, the cost per letter is $<span id="lettercost">6</span>.</p>
<form class="info_form">
  <input type="text" id="inputletters" value="Example Name"><br>
  <input type="button" value="Submit" class="button" id="getprice"  onClick="getPrice();">
</form>

Answer 1

这是一个可运行的示例 - price是一个对象，您想要.textContent，并将其解析为数字，以便工作。

＆＃13;

＆＃13;

function getPrice() {
  var quantity = document.getElementById('inputletters').value.length;
  var price = document.getElementById('lettercost').textContent;
  console.log(typeof quantity, typeof price)
  var total = Number(quantity) * Number(price);
  var cost = document.getElementById('cost');
  cost.textContent = total;
}

＆＃13;

<section class="sign" id="sign">
  <h3 class="sign_header">CUSTOM SIGNAGE</h3>
  <p class="sign_text">Enter Name, the cost per letter is $<span id="lettercost">6</span>.</p>
  <form class="info_form">
    <input type="text" id="inputletters" value="Example Name"><br>
    <input type="button" value="Submit" class="button" id="getprice" onClick="getPrice();">
  </form>
  <div id="cost"></div>
</section>

＆＃13;

＆＃13;

＆＃13;