告诉我们发生了什么:
关于认证项目-创建收银机项目的判定问题
为什么代码没有改变,同样的项目判定为通过,但是刷新页面后就判定为不通过
比如这个8号,此时为通过
再运行测试一次,就判定为不通过
另外就是其他的测试。如这个11号。把要求复制过去,结果完全一样,但是就是判定不通过。
我看参考都是创造p元素
到目前为止你的代码
<!-- file: index.html -->
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./styles.css"/>
<title>freeCodeCamp Logo
Cash Register</title>
</head>
<body>
<main>
<figure>
<img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="logo">
</figure>
<h1>Cash Register Project</h1>
<p id="change-due">
</p>
<div id="container">
<label for="cash">Enter cash from customer:</label>
<input type="number" id="cash" name="cash"/>
<button id="purchase-btn">Purchase</button>
</div>
<div id="shape">
<p>Total: $<span id="price">19.5</span></p>
<div id="link"></div>
<div id="bluebkg">
<div id="key">
<span></span>
<span></span>
<span></span><br/>
<span></span>
<span></span>
<span></span><br/>
<span></span>
<span></span>
<span></span>
</div>
<div id="drawer">
<p>Change in drawer:</p>
<ul>
<li>Pennies: $<span class="coin">0.85</span></li>
<li>Nickels: $<span class="coin">2.05</span></li>
<li>Dimes: $<span class="coin">2.5</span></li>
<li>Quarters: $<span class="coin">2.75</span></li>
<li>Ones: $<span class="coin">24</span></li>
<li>Fives: $<span class="coin">0</span></li>
<li>Tens: $<span class="coin">0</span></li>
<li>Twenties: $<span class="coin">0</span></li>
<li>Hundreds: $<span class="coin">0</span></li>
</ul>
</div>
</div>
<div id="handle">
<div></div>
</div>
</div>
</main>
<script src="./script.js"></script>
</body>
</html>
/* file: script.js */
let price = 20;
let cash = 10;
let template = [
['PENNY', 1.01],
['NICKEL', 2.05],
['DIME', 3.1],
['QUARTER', 4.25],
['ONE', 90],
['FIVE', 55],
['TEN', 20],['TWENTY', 60],
['ONE HUNDRED', 100]
];
let cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
const cashInput = document.getElementById('cash');
const purchaseBtn = document.getElementById('purchase-btn');
const changeDue = document.getElementById('change-due');
const priceEle = document.getElementById('price');
const coinEles = document.getElementsByClassName('coin');
priceEle.textContent = price;
cashInput.value = cash;
/*
总价price,收银机所有零钱数组moneyArr,客户给钱cashInputAmount
创建找零数量changeAmount = cashInputAmount - price,创建收银机零钱总数moneyArrTotal,创建结果数组result
为moneyArr添加面值和数量
if 找零数量changeAmount > 零钱总数
Status: INSUFFICIENT_FUNDS
else if 找零数量changeAmount = 零钱总数
Status: CLOSED
else 找零数量changeAmount < 零钱总数
moneyArr.forEach,零钱数组排序从大到小,零钱数组循环
if changeAmount >= 单个面值,如找零312,和100块的有4张
if changeAmount / 面值 >= 面值的张数,张数不够,如找零312,和100块的有2张
changeAmount = changeAmount - 面值总数
result.push([面值,面值张数])
else changeAmount / 面值 < 面值的张数,张数够,如找零312,和100块的有4张
changeAmount = changeAmount - Math.floor(changeAmount / 面值) * 面值
result.push([面值,Math.floor(changeAmount / 面值])
else changeAmount < 单个面值
否则,什么都不做,下一个零钱进行比较
if changeAmount = 0
Status: OPEN
else 无法找零
Status: INSUFFICIENT_FUNDS
*/
let result = [];
let coinElesArr = Array.from(coinEles);
let moneyArr = [];
for (let i = 0; i < coinElesArr.length; i++) {
moneyArr.push([template[i][0], cid[i][1]]);
//更新HTML内容为数组内容
coinElesArr[i].textContent = cid[i][1];
}
//字符,面额,张数,面值总额
moneyArr.forEach(ele => {
switch (ele[0].toUpperCase()) {
case 'PENNY':
ele.splice(1,0, 0.01, Math.ceil(ele[1] / 0.01));
break;
case 'NICKEL':
ele.splice(1,0, 0.05, Math.ceil(ele[1] / 0.05));
break;
case 'DIME':
ele.splice(1,0, 0.1, Math.ceil(ele[1] / 0.1));
break;
case 'QUARTER':
ele.splice(1,0, 0.25, Math.ceil(ele[1] / 0.25));
break;
case 'ONE':
ele.splice(1,0, 1, Math.ceil(ele[1] / 1));
break;
case 'FIVE':
ele.splice(1,0, 5, Math.ceil(ele[1] / 5));
break;
case 'TEN':
ele.splice(1,0, 10, Math.ceil(ele[1] / 10));
break;
case 'TWENTY':
ele.splice(1,0, 20, Math.ceil(ele[1] / 20));
break;
case 'ONE HUNDRED':
ele.splice(1,0, 100, Math.ceil(ele[1] / 100));
break;
}
});
moneyArr.reverse();
//console.log(moneyArr);
const changeMoney = (cashInputAmount, price, moneyArr) => {
if (cashInputAmount < price) {
changeDue.textContent = '';
alert('Customer does not have enough money to purchase the item');
cashInput.value = '';
} else if (cashInputAmount === price) {
changeDue.textContent = '';
changeDue.innerHTML = '<p>No change due - customer paid with exact cash</p>';
cashInput.value = '';
} else {
changeDue.textContent = '';
let changeAmount = Number((cashInputAmount - price).toFixed(2));
console.log(`找零:${changeAmount}`);
const moneyArrTotal = moneyArr.reduce((sum,current) => sum + current[3], 0);
console.log(`零钱总数:${moneyArrTotal}`);
if (changeAmount > moneyArrTotal) {
console.log('零钱不够');
changeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>';
} else if (changeAmount === moneyArrTotal) {
console.log('零钱刚好');
changeDue.innerHTML = '<p>Status: CLOSED</p>';
let html = '';
moneyArr.forEach(ele => {
if (ele[3] !== 0) {
html += '<p>' + ele[0] + ': $' + ele[3] + '</p>';
}
});
console.log(html);
changeDue.innerHTML += html;
} else {
changeDue.textContent = '';
console.log('零钱够多');
moneyArr.forEach(ele => {
if (changeAmount >= ele[1]) {
console.log(`当前比较面额:${ele[1]}`, `找零:${changeAmount}`);
if (changeAmount / ele[1] >= ele[2]) {
console.log(`${ele[1]}的数量不够, 总共${ele[3]}`);
changeAmount = (changeAmount - ele[3]).toFixed(2);
result.push([ele[0], ele[2], ele[1] * ele[2]]);
console.log(result);
console.log(`剩余找零:${changeAmount}`);
} else {
console.log(`${ele[1]}的数量够, 总共${ele[3]}`);
//console.log(changeAmount * 10000)
result.push([ele[0], Math.floor(changeAmount / ele[1]).toFixed(0), ele[1] * Math.floor(changeAmount / ele[1]).toFixed(2)]);
changeAmount = (changeAmount - Math.floor(changeAmount / ele[1]) * ele[1]).toFixed(2);
console.log(result);
console.log(`剩余找零:${changeAmount}`);
}
if (changeAmount == 0) {
changeDue.innerHTML = '';
changeDue.innerHTML = '<p>Status: OPEN<p/>';
let html = '';
result.forEach(ele => {
html += '<p>' + ele[0] + ': $' + ele[2] + '</p>';
});
changeDue.innerHTML += html;
} else {
changeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS<p/>'
}
}
});
}
cashInput.value = '';
}
};
//changeMoney(100, 3.26, moneyArr);
purchaseBtn.addEventListener('click', () => {
changeMoney(Number(cashInput.value), Number(priceEle.textContent), moneyArr);
});
/* file: styles.css */
* {
padding: 0;
margin: 0;
list-style: none;
}
html {
background: rgb(10, 10, 35);
color: white;
font-size: 16px;
text-align: center;
}
figure {
margin-top: 35px;
margin-bottom: 50px;
}
figure img {
width: 300px;
}
h1 {
margin-bottom: 25px;
}
#change-due {
margin-bottom: 25px;
}
#container {
margin-bottom: 25px;
}
#container *{
display: block;
margin: 0 auto;
}
#container label {
margin-bottom: 6px;
}
#container #cash {
margin-bottom: 15px;
width: 190px;
height: 25px;
}
#container #purchase-btn {
font-size: 1.1rem;
font-weight: bold;
width: 95px;
height: 30px;
background: linear-gradient(180deg,rgb(254, 203, 75),rgb(255, 174, 53));
border-left: 2px solid rgb(254, 172, 50);
border-top: 2px solid rgb(254, 172, 50);
border-right: 2px solid rgb(169, 115, 33);
border-bottom: 2px solid rgb(169, 115, 33);
}
#shape {
width: 320px;
margin: 0 auto;
}
#shape>p:first-of-type {
width: 180px;
height: 30px;
line-height: 30px;
border: 10px solid rgb(153, 201, 255);
margin-left: 15%;
}
#shape #link {
width: 40px;
height: 30px;
background: rgb(153, 201, 255);
margin-left: 25%;
}
#shape #bluebkg {
background: rgb(153, 201, 255);
padding: 20px;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
margin: 0 auto;
margin-bottom: 10px;
}
#shape #bluebkg #key {
width: 30%;
height: 100%;
margin-right: 20px;
display: inline-block;
text-align: left;
vertical-align: top;
}
#shape #bluebkg #key span{
display: inline-block;
width: 20px;
height: 20px;
background: rgb(0, 0, 0);
margin-right: 2px;
}
#shape #bluebkg #drawer {
width: 55%;
display: inline-block;
color: black;
background-color: blue;
text-align: left;
background: white;
padding: 10px 5px 0px 5px;
}
#shape #bluebkg #drawer p {
font-weight: 800;
}
#handle {
height: 50px;
background: rgb(153, 201, 255);
margin: 0 auto;
border: 1px solid rgb(153, 201, 255);
}
#handle div {
width: 20px;
height: 20px;
background-color: black;
border-radius: 10px;
margin: 0 auto;
margin-top: 12px;
}
你的浏览器信息:
用户代理是: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0
挑战信息:
创建收银机项目 - Build a Cash Register














