Question

我正在学习JavaScript，并且通过练习遇到了障碍。我正在尝试制作一个改变决策者的应用程序，但不知道如何成功添加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>

非常感谢！

Answer 1

您引用cents的点尚未定义。

由于您刚开始编程，因此请注意，在函数运行之前，函数中定义的语句不起作用。对于您而言，cents =…语句尚未运行，因为在您的processEntry语句引用if时尚未执行cents函数，因此您正在得到错误。

即使您首先调用了processEntry，它也无法正常工作，因为cents被声明为该函数的局部变量。它必须是全局的（总是一个坏主意），否则该值应返回以供函数调用者使用。

在processEntry的末尾添加以下内容：

return cents;

然后，您只需在if语句之前添加以下内容：

var cents = processEntry();

嘿……现在，更仔细地看，似乎您应该将整个if…有条件地移动到processEntry之内。然后我说的是，上面不需要做并且代码可以完成您期望的工作！

初学者JS练习：Change Maker

1 个答案: