- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试构建一个折旧计算器,它使用用户输入字段返回带有答案值的警报。
如果我不使用用户输入并简单地将变量设置为测试值,则计算器可以完美运行。
但是,当我从 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>
最佳答案
尝试将您的值转换为 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());
关于javascript - 来自 DOM 的用户输入仅返回 NaN,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48693433/
首先我想说的是,我知道isNaN()和 Number.isNaN()工作。我正在阅读 David Flanagan 的 The Definite Guide,他举例说明了如何检查值是否为 NaN :
在表中,对于 skips day 列,最后一行的默认值始终是单词“last”,它不是数字。现在,结果日期显示为“NaN/NaN/NaN”,有什么方法可以将其替换为 Nil 之类的东西。 非常感谢。
我正在制作一个网站,如果用户登录,则会为用户提供一定的注销时间,其中定义了注销时间,剩余时间是从注销时间 - 服务器时间获得的。 我已经通过 PHP 获得了注销时间和服务器时间,但我想动态显示剩余时间
我有以下代码,它简单地初始化一个 UIImageView 以适应 UIImage 在当前屏幕尺寸上尽可能大的比例: CGSize mainScreenSize = [appDelegate mainS
这个问题已经有答案了: Why in numpy `nan == nan` is False while nan in [nan] is True? (1 个回答) 已关闭 3 年前。 我只是觉得这有
我有动态 JQGrid,其中一列是日期列。我从包含 URL 和日期的 feed 中获取数据。 我需要为“日期列”开发列模型,使其显示日期和超链接。但不幸的是,数据显示为 NAN/NAN/NAN (这可
我已经包含了一个演示我的问题的片段。基本上处理给了我这个错误: 调用map(NaN, -3, 3, -125, 125),返回NaN(不是数字) 我理解此消息的方式是,map 函数返回 NaN,并且由
我在下面创建的过滤器适用于 Chrome,但不适用于 Firefox。我不明白为什么。 myApp.filter('dateCustom', [ '$filter', function ($fil
虽然问题的第一部分(在标题中)之前已经回答过几次(即 Why is NaN not equal to NaN? ),但我不明白为什么第二部分会以它的方式工作(受此启发问题 How to Check l
我需要在数组中找到min和max值(不考虑可能的NaN值在这个数组中)。 这只使用 double 会很容易,但是这些 FindMin 和 FindMax 函数必须使用泛型类型。 我尝试以这种方式测
我正在开发一个屏幕,其中 UIScrollView 内只有一个 UIImageView。 UIScrollView 使用户能够固定和缩放图像。我从下面的帖子中得到了帮助。它使用 Storyboard和
尽管看到了类似的答案,但我不知道这里发生了什么。我制作了一个自定义的 UIImageview,它应该在创建后立即开始动画: class HeaderAnimator: UIImageView {
我正在寻找一个 pandas 系列并用下一个数值的平均值填充 NaN,其中:average = next numerical value/(# consecutive NaNs + 1) 到目前为止,
我有一个 mySql 表,其中有一个名为 posts 的列,该列设置为 timestamp 类型,默认为 current_timestamp。然后,我使用 php PDO 获取它的值(以及其他一些列)
我想知道以下类型的 nan 之间有什么区别。除了 NAN_macro (计算结果为 -nan(ind) 而不是 nan )的视觉差异外,它们的行为似乎都相同(根据下面的示例脚本)。 我看了一些其他的答
我为我的网页做了倒计时;它在除 Mozilla 和 IE 之外的所有浏览器上都能正常工作。 我做错了什么,我该如何解决? 下面是我的代码: ***var dt = '2018-06-14 11:59
在将 Xcode 更新到 8.3 后,我在启动时开始收到此错误:由于未捕获的异常“CALayerInvalidGeometry”而终止应用程序,原因:“CALayer 位置包含 NaN:[nan na
我正在使用 jquery 自动完成 onselect 它在不同的文本字段中显示数据。我使用 format_date() 函数在 #dob 和 #anniversery 中显示格式化日期 select:
我有一个带有 json Store 和 DateField 的网格。 Firefox 运行良好,但在 Internet Explorer 8 中无法运行。 我这样定义: function conver
我有一个错误,它在启动时使应用程序崩溃。这是我得到的错误: *** Terminating app due to uncaught exception 'CALayerInvalidGeometry'
我是一名优秀的程序员,十分优秀!