为啥我在使用 parseINt 或 undefined 时得到 NaN？
Posted
技术标签:
【中文标题】为啥我在使用 parseINt 或 undefined 时得到 NaN？【英文标题】：Why im i getting NaN when using parseINt or undefined?为什么我在使用 parseINt 或 undefined 时得到 NaN？ 【发布时间】：2018-10-23 07:06:45 【问题描述】：尽管使用了parseInt 或.value，但我收到了NaN，我不明白为什么会这样。我也尝试更改代码，但后来我得到undefined。
作为一个初学者，我不明白我做错了什么，尽管它很简单。有什么建议吗？
const btn = document.querySelector('.btn');
btn.addEventListener('click',calcWinner);
function calcWinner(e)
const powerG = document.querySelector('#power-g');
const techG = document.querySelector('#tech-g');
const chanceG = document.querySelector('#chance-g');
const powerF = document.querySelector('#power-f');
const techF = document.querySelector('#tech-f');
const chanceF = document.querySelector('#chance-f');
let gokuR = parseInt(powerG + techG + chanceG)
let friezeR = parseInt(powerF.value) + parseInt(techF.value) + parseInt(chanceF.value);
console.log(parseInt(gokuR.value));
<body>
<div class="container">
<div class="goku">
<h2>Battle chance</h2>
<form action="">
<input type="number" name="" id="power-g" >
<label for="power-g">Power</label>
<input type="number" name="" id="tech-g" >
<label for="tech-g">Technique</label>
<input type="number" name="" id="chance-g" >
<label for="chance-g">Chance</label>
</form>
</div>
<div class="frieza">
<h2>Battle chance</h2>
<form action="">
<input type="number" name="" id="power-f" >
<label for="power-f">Power</label>
<input type="number" name="" id="tech-f" >
<label for="tech-f">Technique</label>
<input type="number" name="" id="chance-f" >
<label for="chance-f">Chance</label>
</form>
</div>
</div>
<h1 >Winner : <span class="winner"></span></h1>
<a href="#" class="btn">CalcWinner</a>
<script src="app.js"></script>
</body>【问题讨论】：
也提供 html sn-p 由于我们没有 HTML，我们无能为力friezeR 有效，对吧？ gokuR 没有，因为你不使用.value
不，我还没有得到 Nan
form 标签在将信息提交回服务器时使用，因此在您的情况***.com/questions/12064557/… 中使用有点不正确。另外，如果您还没有，请查看***.com/tour 和***.com/help/someone-answers
【参考方案1】：
没有 HTML，很难给你一个准确的答案。但是 parseInt() 用于字符串。您正在尝试在元素而不是字符串上使用它。您需要获取 HTML 元素的值，而不是元素本身。
代替：
const powerG = document.querySelector('#power-g');
您需要执行以下操作：
const powerG = document.querySelector('#power-g').value;
参考：https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/parseInt
【讨论】：
@TodorIvanov 什么箭头函数？您需要传递 parseInt 两件事：要解析的字符串和基数（通常为 10）。parseInt("3", 10) === 3【参考方案2】：
首先，获取值而不是元素，例如像这样：
const powerG = document.querySelector('#power-g').value;
然后使用 parseInt、Number 或 @987654323 @ 将String 数字转换为实际数字，您将能够计算结果。
堆栈sn-p
const btn = document.querySelector('.btn');
btn.addEventListener('click',calcWinner);
function calcWinner(e)
const powerG = document.querySelector('#power-g').value;
const techG = document.querySelector('#tech-g').value;
const chanceG = document.querySelector('#chance-g').value;
const powerF = document.querySelector('#power-f').value;
const techF = document.querySelector('#tech-f').value;
const chanceF = document.querySelector('#chance-f').value;
let gokuR = Number(powerG) + Number(techG) + Number(chanceG);
let friezeR = parseInt(powerF) + parseInt(techF) + parseInt(chanceF);
console.log(gokuR);
console.log(friezeR);
<div class="container">
<div class="goku">
<h2>Battle chance</h2>
<form action="">
<input type="number" name="" id="power-g" >
<label for="power-g">Power</label>
<input type="number" name="" id="tech-g" >
<label for="tech-g">Technique</label>
<input type="number" name="" id="chance-g" >
<label for="chance-g">Chance</label>
</form>
</div>
<div class="frieza">
<h2>Battle chance</h2>
<form action="">
<input type="number" name="" id="power-f" >
<label for="power-f">Power</label>
<input type="number" name="" id="tech-f" >
<label for="tech-f">Technique</label>
<input type="number" name="" id="chance-f" >
<label for="chance-f">Chance</label>
</form>
</div>
</div>
<h1 >Winner : <span class="winner"></span></h1>
<a href="#" class="btn">CalcWinner</a>【讨论】：
谢谢你的帮助，但是双 + 怎么叫？ @TodorIvanov 没有真正的 double+，额外的 + 在为变量添加前缀时的作用是将其转换为数字，就像 parseInt或Number() 会。
@TodorIvanov 我用几个链接（蓝色文本）更新了我的答案，将字符串转换为数字的 3 种方法。以上是关于为啥我在使用 parseINt 或 undefined 时得到 NaN？的主要内容，如果未能解决你的问题，请参考以下文章
为啥 parseInt 为 31 位二进制返回 1 [关闭]
为啥我在使用 jquery 数据表时出现这种类型的错误“TypeError：oColumn is undefined”，我从它的文档中全部遵循