Random Colour Generator. PLEASE HELP!


#1

https://www.codecademy.com/courses/live-stream/lessons/live-stream/exercises/color-generator?action=resume_content_item

I am having problems with my code in the random colour generator exercise. There seems to be something missing but I have been unable to find it.

HTML

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<link rel=“stylesheet” href=“style.css”>
<link href=“https://fonts.googleapis.com/css?family=Nunito” rel=“stylesheet”>
</head>

<body>
<section>
<img src = “https://s3.amazonaws.com/codecademy-content/courses/javascript-dom-events/rainbow.png” alt=“Rainbow Icon”/>
<h1>Random Colour Generator</h1>
<p>Find your new favourite colour!</p>
<button id = “original-button”>Pick a Colour</button>
<button id = “mystery-button”>Mystery Colour</button>
</section>
<script> src = “main.js”</script>
</body>

</html>

CSS

body{
padding: 0;
margin: 0;
font-family: “Nunito”;
background-color: skyblue;
}

img{
width: 25%;
display: block;
margin: 0 auto;
margin-top: 7%;
margin-bottom: 5%;
}

h1{
width: 100%;
text-align: center;
font-size: 30px;
}

p{
width: 100%;
text-align: center;
font-size: 24px;
color: navy;
}

button{
width: 350px;
height: 100px;
display: block;
background-color: purple;
color: white;
font-size: 30px;
/font-family: “Nunito”;/
font-family: inherit;
margin: 0 auto;
margin-bottom: 10px;
border-radius: 3%;
}

JAVASCRIPT

// This variable stores the “Pick a Color” button
const originalButton = document.getElementByID(“original-button”);

// This variable stores the “Mystery Color” button
const mysteryButton = document.getElementByID(“mystery-button”);

// This random number function that will creates color codes for the randomColor variable
//rgb(255,255, 255)
function randomNumber(num){
return Math.floor(Math.random() * num);
}

//rgb(red,green,blue)//
// Write your code below
function colourChange(event){
const randomColor = ‘rgb(’ + randomNumber(255) + ‘,’ + randomNumber(255) + ‘,’ + randomNumber(255) + ‘)’;
event.target.style.backgroundColor = randomColor;
}
originalButton.onclick = colourChange;
mysteryButton.onwheel = colourChange;

//


#2

Hi josephosula!

Thanks for posting your solution – while it looks like the forum has converted some of the characters in your pasted code, I think I’ve spotted the problem.

In your code, you have:

// This variable stores the “Pick a Color” button
const originalButton = document.getElementByID(“original-button”);

// This variable stores the “Mystery Color” button
const mysteryButton = document.getElementByID(“mystery-button”);

The correct name of the function to access an element is “getElementById”. After correcting this, I was able to run your code successfully with the original button changing color when you click it and the mystery button changing color when you scroll with your pointer over it.

In the future, you can use the code formatting in this forum to make the code easier to read and prevent characters from being converted to other things. The format code button looks like this: “</>” in the forum.

Another tip is that you can try to locate the error if you debug your code in the console in your browser using dev tools:
https://www.codecademy.com/articles/use-devtools

When you press the “run” button, you should be able to see the error messages when your code is not able to run properly.

I hope this helps!


#3

If we actually want to generate white, the 255 should be 256.

x = Math.floor(Math.random() * 256);
// possible_outcome_set = { x | 0 <= x < 256; x is INT }

#4
// This variable stores the "Pick a Color" button
const originalButton = document.getElementById("original-button");

// This variable stores the "Mystery Color" button
const mysteryButton = document.getElementById("mystery-button");

// This random number function that will creates color codes for the randomColor variable
//rgb(255,255, 255)
function randomNumber(num){
  return Math.floor(Math.random() * num);
}
//THIS IS NOT JAVASCRIPT!
//const randomColour = "rgb("num + num + num")"//

//rgb(red,green,blue)//
// Write your code below
function colourChange(event){
  const randomColor = 'rgb(' + randomNumber(255) + ',' + randomNumber(255) + ',' + randomNumber(255) + ')'; 
  event.target.style.backgroundColor = randomColor;
}
originalButton.onclick = colourChange;
mysteryButton.onwheel = colourChange;


// 

Thanks for the update, as you can see, I have made the change but unfortunately it has made no difference


#5

Hi @josephosula,

Chris and mtf both addressed some key points, I have some minor suggestions that might help.

When I copied your code over, I noticed that smart quotes were turned on. (The quotes showing a distinct curve depending on the position, see: https://practicaltypography.com/straight-and-curly-quotes.html) This could be because of some text editor format but could affect how your code is run.

Another minor point, in your index.html file, the <script> that connects your JavaScript file has its src attribute within the <script> element instead of adding it to the opening <script> tag like so:

<!-- will work -->
<script src="main.js"></script>

<!-- won't work -->
<script> src = “main.js”</script>

Hope that clears it up!
-Kenny


#6

Thank you sooo much, @realkennylin it worked!


#7

No problem :smile:

In case you run into this problem again, I’d go back to Chris’s comment about using the dev tools in your browser.

Adding a statement like: console.log('this is working!') into your main.js file gives you idea of what code is running and what’s not. In this case, after adding the console.log() statement, I would have noticed that the string wasn’t printing. Knowing that the syntax is correct I would search for why it wasn’t printing and continue to debug until I got to the root of the problem, the <script> element.

The console also gives you any errors that are thrown as a result of your code. If you haven’t read it, I’d highly recommend it: https://www.codecademy.com/articles/use-devtools

Cheers,
Kenny


#8

Something else to bear in mind, getElementById and getElementByClassName are typos waiting to happen. Get used to typing querySelector or querySelectorAll to stop those errors from happening. ES2015 give us a new window we really should jump through. This isn’t cutting edge, just better from the standpoint of writing and reading code. And, it lets us use jQuery-like selectors.


#9

Hi thanks for all your help @realkennylin and @mtf but unfortunately the onwheel event is still not working but the onclick one does work. Furthermore, I have tried to use devtools but as you can see in the screenshot it does not appear to be helpful to me


#10

Please re-post your code so we can have a look at it, again.

With the inspector open, click the clear button and then mouseover the mystery button and rotate the scroll wheel. If there is a console error, we will see the message without all the clutter of load sequence messages.

console_clear


#11
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</head>

<body>
  <section>
    <img src = "https://s3.amazonaws.com/codecademy-content/courses/javascript-dom-events/rainbow.png" alt="Rainbow Icon"/>
    <h1>Random Colour Generator</h1>
    <p>Find your new favourite colour!</p>
    <button id = "original-button">Pick a Colour</button>
    <button id = "mystery-button">Mystery Colour</button>
  </section> 
  <script src = "main.js"></script>
</body>
  
</html>
body{
  padding: 0;
  margin: 0;
  font-family: "Nunito";
  background-color: skyblue;
}

img{
  width: 25%;
  display: block;
  margin: 0 auto;
  margin-top: 7%;
  margin-bottom: 5%;
}

h1{
  width: 100%;
  text-align: center;
  font-size: 30px;
}

p{
  width: 100%;
  text-align: center;
  font-size: 24px;
  color: navy;
}

button{
  width: 350px;
  height: 100px;
  display: block;
  background-color: purple;
  color: white;
  font-size: 30px;
  /*font-family: "Nunito";*/
  font-family: inherit;
  margin: 0 auto;
  margin-bottom: 10px;
  border-radius: 3%;
  }
// This variable stores the "Pick a Color" button
const originalButton = document.getElementById("original-button");

// This variable stores the "Mystery Color" button
const mysteryButton = document.getElementById("mystery-button");

// This random number function that will creates color codes for the randomColor variable
//rgb(255,255, 255)
function randomNumber(num){
  return Math.floor(Math.random() * num);
}
//THIS IS NOT JAVASCRIPT!
//const randomColour = "rgb("num + num + num")"//

//rgb(red,green,blue)//
// Write your code below
function colourChange(event){
  const randomColor = 'rgb(' + randomNumber(255) + ',' + randomNumber(255) + ',' + randomNumber(255) + ')'; 
  event.target.style.backgroundColor = randomColor;
}
originalButton.onclick = colourChange;
mysteryButton.onwheel = colourChange;


// 

#12

As a general rule, we don’t normally include whitespace in attribute declarations. The only space will be immediately before the attribute name.

src="https//..."

id="original..."

In code, though, that is a different story. We always leave whitespace around operators so they stand out.

I don’t see any immediate issues with your code, though I would suggest keeping the spelling consistent and use the US spelling for color. Very minor concern, on the whole.

When you cleared the console and ran the code on the mystery button, did any message come up?


#13

I have honestly seen no error message

!


#14

Just for the heck of it, change the listener back to the onclick event and see that the button actually works. I really don’t see anything wrong.


#15

I think you’re onto something, I don’t see any errors here either. When I first approached this exercise, I tried to click on the “Mystery Color” button and I didn’t realize it was meant for when we use the wheel on the mouse (for scrolling). Then the colors started changing when I spun the mouse wheel while the cursor was over the button.

@josephosula try using your mouse wheel if you have one? Conversely, using a trackpad and whatever scroll option you have (e.g. two finger scrolling on certain trackpads) will also work.


#16

Yes thanks that worked perfectly, I just scrolled with two fingers on the mystery button and it changed colours!