Learn Basic Debugging by Building a Random Background Color Changer - Step 8

JavaScript
1

Tell us what’s happening:

I have checked that the code is working but for some reason they are saying I’m wrong can somebody please explain to me what it means cause i’m now getting confused😥

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Build a random background color changer</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1>Random Background Color changer</h1>

    <main>
      <section class="bg-information-container">
        <p>Hex Code: <span id="bg-hex-code">#110815</span></p>
      </section>

      <button class="btn" id="btn">Change Background Color</button>
    </main>
    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --yellow: #f1be32;
  --golden-yellow: #feac32;
  --dark-purple: #110815;
  --light-grey: #efefef;
}

body {
  background-color: var(--dark-purple);
  color: var(--light-grey);
  text-align: center;
}

.bg-information-container {
  margin: 15px 0 25px;
  font-size: 1.2rem;
}

.btn {
  cursor: pointer;
  padding: 10px;
  margin: 10px;
  color: var(--dark-purple);
  background-color: var(--golden-yellow);
  background-image: linear-gradient(#fecc4c, #ffac33);
  border-color: var(--golden-yellow);
  border-width: 3px;
}

.btn:hover {
  background-image: linear-gradient(#ffcc4c, #f89808);
}


/* file: script.js */
const darkColorsArr = [
  "#2C3E50",
  "#34495E",
  "#2C2C2C",
  "#616A6B",
  "#4A235A",
  "#2F4F4F",
  "#0E4B5A",
  "#36454F",
  "#2C3E50",
  "#800020",
];

function getRandomIndex() {
  const randomIndex = Math.floor(darkColorsArr.length * Math.random());
  return randomIndex;
}

const body = document.querySelector("body");
const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");

function changeBackgroundColor() {
  const color = darkColorsArr[getRandomIndex()];

  bgHexCodeSpanElement.innerText = color;
  body.style.backgroundColor = color;
}
const btn = document.querySelector("#btn");


// User Editable Region

btn.onclick = onclick;
function onclick () {
  changeBackgroundColor();
}

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0

Challenge Information:

Learn Basic Debugging by Building a Random Background Color Changer - Step 8

2

Please click reset. When the editor shows you the original onclick assignment , it shows it with the function call changeBackgroundColor() on the right side of the equals. This is incorrect so they want you to fix it.

To fix it you have to change the changeBackgroundColor() to its “reference form” instead of its “call form”.

That is, when we write any function name down we are referencing that function but when we add the two parentheses () next to the name we are calling that function.

Since onclick property wants a function reference then and not a function call, what can you remove from the original line of code in the editor to fix this issue?

1 Like
3

Thanks …it took a while to understand the difference btn the call and reference :sweat_smile::joy::joy:

1 Like
4

You did it. That’s all that matters now!

5

gracias, me ayudo mucho esta explicacion

1 Like