Question

我正在尝试构建折旧计算器，该计算器使用用户输入字段返回具有答案值的警报。

如果我不使用用户输入并只是将变量设置为测试值，则计算器可以正常工作。

但是当我从DOM请求用户输入时，计算器只返回NaN。我试图先用vanilla javascript和jquery获取用户输入。我添加了控制台日志以尝试查找问题，并显示变量设置为0或未定义。

这里的任何人都可以帮我弄清楚用户输入无法正常工作的原因吗？

＆＃13;

// 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)
}

＆＃13;

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

＆＃13;

Answer 1

尝试将您的值转换为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());

Answer 2

我做了一些重构：

使用DOM而不是DOM.value

var assetValue = document.getElementById('assetValue'); var years = document.getElementById('years'); var currentYear = document.getElementById('currentYear'); var myBtn = document.getElementById('myBtn');
使用Number(<value>)

var assetValue = document.getElementById('assetValue');
var years = document.getElementById('years');
var currentYear = document.getElementById('currentYear');
var myBtn = document.getElementById('myBtn');


myBtn.addEventListener('click', calc)

function calc(event) {
  event.preventDefault();
  
  var remaining = Number(years.value) - Number(currentYear.value);
  console.log(remaining);
  var syDigits = (Number(years.value) * (Number(years.value) + 1)) / 2;
  console.log(syDigits); // Victor's Algorithm
  var depreciation = Number(assetValue.value) * (remaining / syDigits);
  console.log(depreciation);
  alert("The depreciation in year " + currentYear.value + " is " + depreciation)
  return false;
}

<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="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


<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>

来自DOM的用户输入仅返回NaN

2 个答案: