时间戳

首页 > 解决方案 > 初级 JS 练习：Change Maker

javascript - 初级 JS 练习：Change Maker

问题描述

我正在学习 JavaScript，并且在练习中遇到了障碍。我正在尝试制作一个 change maker 应用程序，但不知道如何成功添加if/else语句。我希望有人能给我一些指导。我一切正常，但是当我尝试添加将输入限制为 0-99 的if/else语句时，它会中断。我收到一个错误，说cents未定义。是我的位置吗？代码错了吗？任何帮助将不胜感激！

var $ = function(id) {
  return document.getElementById(id);
};
var $ = function(id) {
  return document.getElementById(id);
};
var processEntry = function() {
  var entry = $("cents").value; // get user entry
  var cents = parseInt(entry); // parse entry
  makeChange(cents);
  $("cents").focus();
};
if (!isNaN(cents) || cents < 100 || cents > 0) {
  var makeChange = function(cents) {
    var quarters = parseInt(cents / 25); // get number of quarters
    var dimes = parseInt(((cents - (quarters * 25)) / 10)); // get number of dimes
    var nickels = parseInt(((cents - (quarters * 25)) - (dimes * 10)) / 5); // get number of nickels
    var pennies = parseInt(((cents - (quarters * 25)) - (dimes * 10)) - (nickels * 5)); // get number of pennies
    // display the results of the calculations
    $("quarters").value = quarters;
    $("dimes").value = dimes;
    $("nickels").value = nickels;
    $("pennies").value = pennies;
  };
} else {
  alert("Please enter a number between 0-99")
}
window.onload = function() {
  $("calculate").onclick = processEntry;
  $("cents").focus();
};
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
  margin: 0 auto;
  width: 600px;
  border: 3px solid blue;
}

h1 {
  color: blue;
  margin-top: 0;
}

main {
  padding: 1em 2em;
}

label {
  float: left;
  width: 16em;
  text-align: right;
}

input {
  margin-left: 1em;
  margin-bottom: .5em;
}
<main>
  <h1>Change Calculator</h1>
  <label>Enter amount of change due (0-99):</label>
  <input type="text" id="cents" />
  <input type="button" value="Calculate" name="calculate" id="calculate" /><br><br>
  <label>Quarters:</label>
  <input type="text" id="quarters" disabled><br>
  <label>Dimes:</label>
  <input type="text" id="dimes" disabled><br>
  <label>Nickels:</label>
  <input type="text" id="nickels" disabled><br>
  <label>Pennies:</label>
  <input type="text" id="pennies" disabled><br>
</main>

非常感谢！

标签： javascriptif-statement

解决方案

您引用的点，cents尚未定义。

由于您刚刚开始编程，因此您应该知道，函数中定义的语句在函数运行之前没有任何影响。在您的情况下，cents =... 语句尚未运行，因为在您的语句引用processEntry时该函数尚未执行，因此您收到错误消息。ifcents

即使您processEntry首先调用，它也不会像所写的那样工作，因为cents它被声明为函数的本地。它必须是全局的（总是一个坏主意），否则应该返回该值以供函数调用者使用。

在结尾之前添加以下内容processEntry：

return cents;

然后，您可以在if语句之前简单地添加以下内容：

var cents = processEntry();

呵呵……现在，仔细看，看来你应该把整个if……有条件地移到 inside processEntry。然后我说的，上面不需要做，代码会做你所期望的！

推荐阅读