Javascript - 文本字段中返回NaN的字符数

我有一个表单我正在尝试做，如果某人在表单的文本字段中输入文本，然后单击提交，我想向他显示标志（charactercount x价格）我一直得到NaN！Javascript - 文本字段中返回NaN的字符数

继承人我的HTML：

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

，这里是我的javascript

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

来源

2017-05-12 user1527388

你必须把它解析为整数！此外，价格甚至不是包含数字的字符串，它是一个元素。你想要'价值'吗？ – Li357

'price'是一个HTMLElement ...你期望乘法的结果是...你需要使用'var price = document.getElementById（'lettercost'）。textContent;' - 不需要解析它如果使用乘法 –

Jarmouda X .textContent;完美无缺地工作！我不敢相信这是一个微不足道的错误！非常感谢！ – user1527388

这里有一个可运行的例子 - price是一个对象，你要.textContent，并解析这些到号码这工作。

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

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

来源

2017-05-12 02:45:11

Javascript - 文本字段中返回NaN的字符数

回答

相关问题