更改计算器函数不工作(Javascript)



我正在为类制作一个更改计算器,但遇到了一个障碍。经过一段时间的编码,我知道它可以工作,直到makeChange函数中的if语句。我不知道如何更改函数以使它们工作并在HTML框中显示某些内容。

/* global math */
var $ = function(id) {
return document.getElementById(id);
};
var makeChange = function() {
var cents = parseInt($("cents").value);
if (cents <= 99 && cents >= 25) {
var quarters = math.floor(cents / 25);
($("quarters").value).innerHTML = quarters;
}
if (cents <= 24 && cents >= 10) {
var dimes = math.floor(cents / 10);
($("dimes").value).innerHTML = dimes;
}
if (cents <= 9 && cents >= 5) {
var nickles = math.floor(cents / 5);
($("nickles").value).innerHTML = nickles;
}
if (cents <= 4 && cents >= 1) {
var pennies = math.floor(cents / 1);
($("pennies").value).innerHTML = pennies;
}
};
var processEntry = function() {
var cents = parseInt($("cents").value);
if (cents >= 0 && cents <= 99) {
$("cents").value = makeChange(cents);
}
if (isNaN(cents)) {
alert("Please enter a number between 0 and 99.");
}
};
window.onload = function() {
$("calculate").onclick = processEntry;
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Make Change</title>
<link rel="stylesheet" href="styles.css">
<script src="make_change.js"></script>
</head>
<body>
<main>
<h1>x x's 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>
</body>
</html>

我意识到我最初发布的内容并不是我想做的。事实证明,我有一种让事情变得比应该做的更复杂的诀窍。所以我回到绘图板上,得出了这个:

var $ = function(id) {
return document.getElementById(id);
};
var makeChange = function(cents) {
var quarters = parseInt(cents / 25);
cents = cents % 25;
var dimes = parseInt(cents / 10);
cents = cents % 10;
var nickels = parseInt(cents / 5);
cents = cents % 5;
var pennies = parseInt(cents / 1);

$("quarters").value = quarters;
$("dimes").value = dimes;
$("nickels").value = nickels;
$("pennies").value = pennies;
};
var processEntry = function() {
var cents = parseInt($("cents").value);
if (cents >= 0 && cents <=99) {
makeChange(cents);
$("cents").value = '';
}
if (isNaN(cents)) {
alert("Please enter a number between 0 and 99.");
}

};
window.onload = function() {
$("calculate").onclick = processEntry;
};

我确实加入了之前回答的几行(谢谢<3(。但现在运行得很顺利。谢谢大家的帮助!

将所有.value.innerHTML设置改为.value。此外,Math对象用大写字母M.拼写


/* global math */
var $ = function(id) {
return document.getElementById(id);
};
var makeChange = function() {
var cents = parseInt($("cents").value);
if (cents <= 99 && cents >= 25) {
var quarters = Math.floor(cents / 25);
$("quarters").value = quarters;
}
if (cents <= 24 && cents >= 10) {
var dimes = Math.floor(cents / 10);
$("dimes").value = dimes;
}
if (cents <= 9 && cents >= 5) {
var nickles = Math.floor(cents / 5);
$("nickles").value = nickles;
}
if (cents <= 4 && cents >= 1) {
var pennies = Math.floor(cents / 1);
$("pennies").value = pennies;
}
};

如果我能正确回答你的问题,你想要这样的东西,

/* global math */
var $ = function(id) {
return document.getElementById(id);
};
var makeChange = function() {
var cents = parseInt($("cents").value);

if (cents <= 99 && cents >= 25) {
var quarters = Math.floor(cents / 25);
$("quarters").value = quarters;
}else $("quarters").value = '';

if (cents <= 24 && cents >= 10) {
var dimes = Math.floor(cents / 10);
$("dimes").value = dimes;
}else $("dimes").value = '';

if (cents <= 9 && cents >= 5) {
var nickles = Math.floor(cents / 5);
$("nickels").value = nickles;
}else $("nickels").value = '';

if (cents <= 4 && cents >= 1) {
var pennies = Math.floor(cents / 1);
$("pennies").value = pennies;
}else $("pennies").value = '';

};
var processEntry = function() {
var cents = parseInt($("cents").value);
if (cents >= 0 && cents <= 99) {
makeChange(cents);
$("cents").value = '';
}
if (isNaN(cents)) {
alert("Please enter a number between 0 and 99.");
}
};
window.onload = function() {
$("calculate").onclick = processEntry;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Make Change</title>
<link rel="stylesheet" href="styles.css">
<script src="make_change.js"></script>
</head>
<body>
<main>
<h1>x x's 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>
</body>
</html>

完整的工作示例,用你的打字错误修复

最新更新