来自DOM的用户输入仅返回NaN
来自DOM的用户输入仅返回NaN
提问于 2018-02-09 03:35:10
我正在尝试构建一个折旧计算器，它使用用户输入字段返回带有答案值的警报。
如果我不使用用户输入，而只是将变量设置为测试值，那么计算器就能完美地工作。
但是，当我从DOM请求用户输入时，计算器只返回NaN。我首先尝试使用vanilla javascript获取用户输入，然后是jquery。我添加了控制台日志来尝试查找问题，结果显示变量设置为0或未定义。
这里有人能帮我找出用户输入不起作用的原因吗？
// This is my attempt to get elements with JS, the only one that works is the button, I commented out the three that didn't work to attemmpt to fix with jquery
var assetValue = document.getElementById('assetValue').value;
var years = document.getElementById('years').value;
var currentYear = document.getElementById('currentYear').value;
var myBtn = document.getElementById('myBtn');
// This is my attempt with Jquery, none of it works, and I did not run it without commenting out the relevant vanilla JS
var assetValue = $("input#assetValue").val();
var years = $("input#years").val();
var currentYear = $("input#currentYear").val();
// Everything after here seems to be working fine, I used console logs to figure out where it messed up
//attach click event listener
myBtn.addEventListener('click', calc)
//The event object is then passed to this, I am assigning it the variable d
function calc(d) {
//prevent the default action - form submit / page refresh
d.preventDefault();
//Create derived variables
console.log(assetValue);
var remaining = (years - currentYear);
console.log(remaining);
var syDigits = ((years * (years + 1)) / 2);
console.log(syDigits);
var depreciation = (assetValue * (remaining / syDigits));
console.log(depreciation);
//Create Alert
alert("The depreciation in year " + currentYear + "is " + depreciation)
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Depreciation Calculator</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<body>
<!-- The Form -->
<div class="container">
<form>
<div class="form-group">
<label for="exampleInputAsset">Asset Base</label> $
<input type="number" class="form-control" id="assetValue" placeholder="Enter An Integer Without Commas">
</div>
<div class="form-group">
<label for="exampleInputYears"># of Years</label>
<input type="number" class="form-control" id="years" placeholder="Enter An Integer Without Commas">
</div>
<div class="form-group">
<label for="exampleInputCurrentYear">Current Year</label>
<input type="number" class="form-control" id="currentYear" placeholder="Enter An Integer Without Commas">
</div>
<button type="submit" class="btn btn-primary" id="myBtn">Submit</button>
</form>
</div>
<script src="calculator.js"></script>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2018-02-09 03:48:05
尝试将您的值转换为int：
发自：
var assetValue = $("input#assetValue").val();
var years = $("input#years").val();
var currentYear = $("input#currentYear").val();至：
var assetValue = parseInt($("input#assetValue").val());
var years = parseInt($("input#years").val());
var currentYear = parseInt($("input#currentYear").val());页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48693433
复制相关文章
相似问题
腾讯云开发者
