Cash Register: Cryptic Error in Preview Screen

JavaScript
1

I get a weird error with the following code:

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="stylesheet" href="styles.css" />
      <title>Cash Register</title>
    </head>
    <body>
      <h1>Cash Register</h1>
      <div class="input-container">
      <label for="number-input">Cash:</label>
      <input  value="" id="cash" />
      <br></br>
      </div>
      <div class="buttons">
      <button id="purchase-btn">Purchase</button>
      </div>
      <div id="change-due"></div>
      <script type="text/javascript" href="script.js"></script>
    </body>
</html>

* {
  margin: 0;
  padding: 0;
  display: block;
}

h1 {
  text-align: center;
  margin-bottom: 10px;
}

.purchase-btn {
  width: 100px;
  height: 60px;
  margin-right: 40px;
  border-width: 3px;
  font-size: 18px;
  color:white; 
  background-color: green;
  border-color: green;
}

let price = 1.87;
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 cash = document.getElementById("cash");
const changeDue = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");

purchaseBtn.addEventListener((cid, cash, price) => {
  const currency = [ .01, .05, .10, .25, 1, 5, 10, 20, 100];

  let count = [0, 0, 0, 0, 0, 0, 0, 0, 0];
  let message = "";
  let change = cash - price;

  const paid = parseInt(cash.text);

  if (change < 0) {
    message = "Status : INSUFFICIENT_FUN DS";
  }

  let index = cid.length;
  let zeroes = 0;

  while (index >= 0 && change !== 0) {
    while (cid[index][1] >= change) {
      let denomination = cid[index][0];
      let inDrawer = cid[index][1];
      let currValue = currency[index];
      cid[index][1] -= denomination;
      count[index]++;
      change -= denomination;

      if (cid[index][1] === 0) {
        zeroes++;
      }

      index--;
    }
  }

  if (zeroes === cid.length) {
    message = "Status: CLOSED";
  }
  else {
    message = "Status: OPEN";
  }

  for (let i = count.length; count >= 0; count--) {
    message += " " + denomination + ": $" + count[i] * currency[i] + "\n";
    }

  changeDue.textContent = message;
  console.log(message);
});

The error is a very long block of code having to do with the window object, followed by an image of the window with no .css access (The link is in the HTML) then the line “use strict”.

Fcc woul not allow me to copy the error because it is in the preview screen. The console window has no information.

2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Also please always include a link when you post about a specific project or step. It helps the person reading to help you faster.

3

something’s wrong with the css. If you delete it all, you won’t see that error.
I’m going to see if I can figure out why but for now, just remove it and continue working.

1 Like
4

not sure why but this display: block is the problem
I would remove it and add it to whichever element needs it for now.

as reference for others reading this thread, the errors shown in the console were:

window.__frameId = 'fcc-main-frame'; window.onerror = function(msg) { const string = msg.toLowerCase(); if (string.includes('script error')) { msg = 'Build error, open your browser console to learn more.'; } console.log(msg); return true; }; document.addEventListener('click', function(e) { let element = e.target; while(element && element.nodeName !== 'A') { element = element.parentElement; } if (element && element.nodeName === 'A' && new URL(element.href).hash === '') { e.preventDefault(); window.parent.window.alert( i18nContent.t('misc.iframe-alert', { externalLink: element.href }) ) } if (element) { const href = element.getAttribute('href'); if (!href || href[0] !== '#' && !href.match(/^https?:\/\//)) { e.preventDefault(); } } }, false); document.addEventListener('submit', function(e) { const action = e.target.getAttribute('action'); e.preventDefault(); if (action && action.match(/https?:\/\//)) { window.parent.window.alert( i18nContent.t('misc.iframe-form-submit-alert', { externalLink: action }) ) } }, false);
Cash Register
* { margin: 0; padding: 0; display: block; } h1 { text-align: center; margin-bottom: 10px; } .purchase-btn { width: 100px; height: 60px; margin-right: 40px; border-width: 3px; font-size: 18px; color:white; background-color: green; border-color: green; }

Also your html has some syntax mistakes. So I suggest fixing those at some point as well. You can check them all from this online validator:

Edit: I opened an issue on github for this and it turns out that the reason you see this code in your preview pane is because when you set the display: block on everything, you also set it on the script code that is normally hidden and was written by the fcc developers. So you are displaying their script code when you assign ‘block’ to everything including their script tag (which by default has a display of none)

5

Thank you. Your post helped me very much. I don’t know eiher why display: block in the * section causes that to happen.

6

I just updated my previous post to explain it a bit.

Link to issue: