创建收银机项目 - Build a Cash Register 的通过判定问题

告诉我们发生了什么:

关于认证项目-创建收银机项目的判定问题
为什么代码没有改变,同样的项目判定为通过,但是刷新页面后就判定为不通过
比如这个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

I’m seeing an error in the console:

Uncaught TypeError: Cannot set properties of null (setting ‘textContent’)

Try putting this code inside your function rather than leaving in the global space.





let price = 19.5;
let cash = 20;
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", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];
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 客户给钱cashInputAmount < 总价price
  alert "Customer does not have enough money to purchase the item"
else if 客户给钱cashInputAmount = 总价price
  No change due - customer paid with exact cash
else 客户给钱cashInputAmount > 总价price
  if 找零数量changeAmount > 零钱总数moneyArrTotal
    Status: INSUFFICIENT_FUNDS
  else if 找零数量changeAmount = 零钱总数moneyArrTotal
    Status: CLOSED
  else 找零数量changeAmount < 零钱总数moneyArrTotal
    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 < 单个面值
        否则,什么都不做,下一个零钱进行比较
    循环结束,产生结果数组result
    if changeAmount = 0
      Status: OPEN
    else 无法找零
      Status: INSUFFICIENT_FUNDS
*/


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.innerHTML = '';
    alert('Customer does not have enough money to purchase the item');
    cashInput.value = '';
  } else if (cashInputAmount === price) {
    //给钱刚好
    changeDue.innerHTML = '';
    changeDue.innerHTML = '<p>No change due - customer paid with exact cash</p>';
    cashInput.value = '';
  } else {
    //需要找零
    changeDue.innerHTML = '';
    //计算找零数值
    let changeAmount = (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 ahtml = '';
      moneyArr.forEach(ele => {
        if (ele[3] !== 0) {
          ahtml += '<p>' + ele[0] + ': $' + ele[3] + '</p>';
        }
      });
      console.log(ahtml);
      changeDue.innerHTML += ahtml;
    } else {
      //零钱够多,开始进行找零计算
      let result = [];
      changeDue.innerHTML = '';
      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]}`);
            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}`);
          }          
        }
      });//moneyArr.forEach结束
      //产生结果数组,更新HTML内容
      let bhtml = '';
      if (changeAmount == 0) {
        changeDue.innerHTML = '<p>Status: OPEN</p>';
        result.forEach(ele => {
        bhtml += '<p>' + ele[0] + ': $' + ele[2] + '</p>';
        });
        //console.log(bhtml);
        changeDue.innerHTML += bhtml;
      } else {
        changeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS<p/>'
      }
    }//更新内容结束
    //更新HTML后清空输入框
    cashInput.value = '';
  }
};
//changeMoney(100, 3.26, moneyArr);

purchaseBtn.addEventListener('click', () => {
  changeMoney(Number(cashInput.value), Number(priceEle.textContent), moneyArr);
});

您好,这段运行代码多次,并没有在控制台看到什么错误。
这是我最新的JS代码,并且在测试过程中发现一个特性。

如这个11号,将cid数组内容,price数字和cash数字复制到代码中,运行测试,此时11判定通过,12判定不通过。


下一步将12内容中的cid数组内容,price数字和cash数字复制到代码中,再次运行此时。此时反而11判定不通过,12判定通过。

JS代码的变化,只有cid数组,变量price和变量cash。

Is this really what you want to do? The value of cash should be coming from the user’s input.

In my last post, I tried to encourage you to move your global variables inside a function. The tests run repeatedly one after the other. The only variables that should be global are price and cid or any other variable that will not change during processing.

You can add this code to the end of your script file to simulate the tests:

console.log("\nTest #11");
price = 19.5;
document.querySelector("#cash").value = 20;
cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: OPEN QUARTER: $0.5");
console.log("\nTest #12");
price = 3.26;
document.querySelector("#cash").value = 100;
cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04");

A complete list can be found at: https://gist.github.com/ilenia-magoni/16d87f02d6b7d9725e7a07635b875973

Thanks for providing the new link.

我之前一直是通过input元素输入,之前没有说到这个事情。
后来发现怎么都无法通过所有测试,为了便于测试(因为改动代码会导致刷新,input元素会重置为空),就在代码中设置数值。

后续我会尝试再次修改代码,尽量减少全局变量的数量

let price = 19.5;
let cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];

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;
//let cash = 20;
//cashInput.value = cash;
/*
总价price,收银机所有零钱数组moneyArr,客户给钱cashInputAmount
创建找零数量changeAmount = cashInputAmount - price,创建收银机零钱总数moneyArrTotal,创建结果数组result
为moneyArr添加面值和数量
if 客户给钱cashInputAmount < 总价price
  alert "Customer does not have enough money to purchase the item"
else if 客户给钱cashInputAmount = 总价price
  No change due - customer paid with exact cash
else 客户给钱cashInputAmount > 总价price
  if 找零数量changeAmount > 零钱总数moneyArrTotal
    Status: INSUFFICIENT_FUNDS
  else if 找零数量changeAmount = 零钱总数moneyArrTotal
    Status: CLOSED
  else 找零数量changeAmount < 零钱总数moneyArrTotal
    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 < 单个面值
        否则,什么都不做,下一个零钱进行比较
    循环结束,产生结果数组result
    if changeAmount = 0
      Status: OPEN
    else 无法找零
      Status: INSUFFICIENT_FUNDS
*/
//给零钱数组添加数据,字符,面额,张数,面值总额
const adjustcidArr = cid => {
  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 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);
  return moneyArr;
};


const changeMoney = (cashInputAmount, price) => {
  if (cashInputAmount < price) {
    //给钱不够
    changeDue.innerHTML = '';
    alert('Customer does not have enough money to purchase the item');
    cashInput.value = '';
  } else if (cashInputAmount === price) {
    //给钱刚好
    changeDue.innerHTML = '';
    changeDue.innerHTML = '<p>No change due - customer paid with exact cash</p>';
    cashInput.value = '';
  } else {
    //需要找零的情况
    changeDue.innerHTML = '';
    //计算找零数值
    let changeAmount = (cashInputAmount - price).toFixed(2);
    console.log(`找零:${changeAmount}`);
    //计算零钱总数
    let moneyArr = adjustcidArr(cid);
    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 ahtml = '';
      moneyArr.forEach(ele => {
        if (ele[3] !== 0) {
          ahtml += '<p>' + ele[0] + ': $' + ele[3] + '</p>';
        }
      });
      console.log(ahtml);
      changeDue.innerHTML += ahtml;
    } else {
      //零钱够多,开始进行找零计算
      let result = [];
      changeDue.innerHTML = '';
      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]}`);
            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}`);
          }          
        }
      });//moneyArr.forEach结束
      //产生结果数组,更新HTML内容
      let bhtml = '';
      if (changeAmount == 0) {
        changeDue.innerHTML = '<p>Status: OPEN</p>';
        result.forEach(ele => {
        bhtml += '<p>' + ele[0] + ': $' + ele[2] + '</p>';
        });
        //console.log(bhtml);
        changeDue.innerHTML += bhtml;
      } else {
        changeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS<p/>'
      }
    }//更新内容结束
    //更新HTML后清空输入框
    cashInput.value = '';
  }
};
//changeMoney(100, 3.26, moneyArr);

purchaseBtn.addEventListener('click', () => {

  changeMoney(Number(cashInput.value), Number(priceEle.textContent));
});

现在全局变量只有cid数组和price,但是测试结果仍然是:
将11的cid和price复制到代码中,11通过12不通过


将12的cid和price复制到代码中,12通过11不通过

另外发现,11和12的cid数组内容完全一致,只有price不一样
image

put this code, all at once, at the end of the JS file, your app needs to have the correct value for all of them. Your app does not do correct calculations

console.log("\nTest #9");
price = 11.95;
document.querySelector("#cash").value = 11.95;
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "No change due - customer paid with exact cash");

console.log("\nTest #11");
price = 19.5;
document.querySelector("#cash").value = 20;
cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: OPEN QUARTER: $0.5");

console.log("\nTest #12");
price = 3.26;
document.querySelector("#cash").value = 100;
cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04");

console.log("\nTest #14");
price = 19.5;
document.querySelector("#cash").value = 20;
cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: INSUFFICIENT_FUNDS");

console.log("\nTest #16");
price = 19.5;
document.querySelector("#cash").value = 20;
cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: INSUFFICIENT_FUNDS");

console.log("\nTest #18");
price = 19.5;
document.querySelector("#cash").value = 20;
cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
document.querySelector("#purchase-btn").click();
console.log("actual", document.querySelector("#change-due").innerText);
console.log("expected", "Status: CLOSED PENNY: $0.5");

wrong calculation

test 18, wrong

the tests need to pass at the same time. Here 11 pass, 12 fails

here test 11 fails, 12 passes

they need to all pass at the same time

use the test code in the gist to figure out what’s the issue

1 Like

谢谢您 :laughing:通过您的帮助,我找到了原因。
其实并不是两个函数有问题,而是addEventListener有问题,原来写的是这个


这导致测试代码无法更改price的数值,所以一直是错误结果。我认为是从HTML网页获取price的数值,所以一直没有察觉到这个。

更改后就没有问题了