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

JavaScript
1

Tell us what’s happening:

What am i doing wrong in this bit every other step has now worked

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 */

// User Editable Region

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()];

  if (bgHexCodeSpanElement) {
    bgHexCodeSpanElement.innerText = color;
  }
  body.style.backgroundColor = color;
}

const btn = document.querySelector("#click-btn"); 
console.log(btn);

if (btn) {
  btn.addEventListener("click", 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/125.0.0.0 Safari/537.36

Challenge Information:

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

2

I would suggest resetting the lesson.

The goal of this step is to fix the error on this line here

const btn = document.querySelector("#click-btn");

the issue is that there is no click-btn id

open up the index.html file and look at the button element.
what does the id value say

once you fix this line here with the correct id name, then the test will pass

const btn = document.querySelector("#click-btn");
1 Like
3

i have tried that but it did not work

1 Like
4

Hi @mbas

So the forum can assist please post your full code and the error message.

Use the following method to post code to the forum:

  1. On a separate line type three back ticks.
  2. On a separate line paste your code.
  3. On the last line type three back ticks. Here is a single back tick `

Happy coding

5 
const darkColorsArr = [
  "#2C3E50",
  "#34495E",
  "#2C2C2C",
  "#616A6B",
  "#4A235A",
  "#2F4F4F",
  "#0E4B5A",
  "#36454F",
  "#2C3E50",
  "#800020",
];

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

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

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

  body.style.backgroundColor = color;

  if (bgHexCodeSpanElement) {
    bgHexCodeSpanElement.innerText = color;
  }
}
const btn = document.querySelector("#change-color-btn");

if (btn) {
  btn.addEventListener("click", changeBackgroundColor);
}else {
  console.error("Button element not found");
}

You should fix the

id

name of

"#click-btn"

line to match the correct

id

name in the

index.html

// tests completed // console output Button element not found [TypeError: Cannot read properties of null (reading ‘id’)]

1 Like
6

Hi @mbas

You should fix the id name of "#click-btn" line to match the correct id name in the index.html file.

You need to use the id attribute value for the .querySelector()

Happy coding

1 Like
7

The issue is that you are overcomplicating this.

You don’t need any of this right here

reset the lesson.

The only line you need to touch is this part here

specifically this part here

Look more closely at the hint provided to you here in the button element

what does the id name say there?
Use that id for your querySelector method to pass the test

hope that helps

8 
onst darkColorsArr = [
  "#2C3E50",
  "#34495E",
  "#2C2C2C",
  "#616A6B",
  "#4A235A",
  "#2F4F4F",
  "#0E4B5A",
  "#36454F",
  "#2C3E50",
  "#800020",
];

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

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

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

  body.style.backgroundColor = color;

  if (bgHexCodeSpanElement) {
    bgHexCodeSpanElement.innerText = color;
  }
}
const btn = document.querySelector("#change-color-btn");

id="btn"
9

this is what i have now but i am still confsued

10

Read this advice again please:

11 
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 id =("click-btn");
console.log(btn);

like this u mean?

12

Did that work successfully and pass the tests?

Open up the index.html to see the correct id name for that button element.

13

it did not i did check that

14

Did you get an error or hint?

15

Sorry, your code does not pass. Don’t give up.

You should fix the id name of "#click-btn" line to match the correct id name in the index.html file.

16

Did you check the index.html file for the correct id name of the button?

17

yes i did but it did not work when i tried it

18

What is the correct id name of the button?

19

id=“btn”>Change Background Color it is this

20

Change Background Color? That’s not right, please give the correct id and I can help you with the next step.