FAQ: DOM Events with JavaScript - Event Types

This community-built FAQ covers the “Event Types” exercise from the lesson “DOM Events with JavaScript”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise Event Types

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

Not sure if I’m the only one or not, but every now and then, the some sections of lessons will automatically have the solution out and ask me to do certain steps as if the solution wasn’t loaded already

2 Likes

Did you click anything? Was there any result?

I just came because of the same thing, the exercises were pre-completed for me as well. In this case you just keep repeatedly clicking “Run”, and the steps are marked as completed one-by-one even if you don’t type anything in the console.

1 Like

Same thing. Exercise was already complete. However, clicking the buttons doesn’t change their background color as it should. I tried deleting the pre-written exercise code, and typing it in from scratch, and still no change. Something wrong with the test.js possibly?

Changed pre-written code to this, and it works: (Added the innerHTML text change for fun)

let colorChange = function(event) {
  let randomColor = `${rgb(255)},${rgb(255)},${rgb(255)}`;
  event.target.style.backgroundColor = `rgb(${randomColor})`;
  event.target.innerHTML = `This is: rgb(${randomColor})`;
  };
button.onclick = colorChange;
mysteryButton.onwheel = colorChange;

Use 256 so it is possible to generate true white.

I have noticed this too and I have also noticed some of the outlines of the functions are not present when I think they should be, i.e. in lesson 7/10, step 1 say to "complete the colorChange function which implies some of the colorChange function should already be there for me to complete but I have to write it from scratch. That would be fine except I don’t know if there are supposed to be any additional statements in that function already that I don’t know about.

It basically makes the lessons impossible to work with.

I reset my lesson and have this in the editor…

// This variable stores the "Pick a Color" button
let button = document.getElementById('color-button');

// This variable stores the "Mystery Color" button
let mysteryButton = document.getElementById('next-button');

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

// Write your code below

Is this what your post is referring to?

yes, this section is a bit broken.

Perhaps you would prefer to study a working example in your own browser?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Random Color Generator</title>
  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Nunito';
      font-size: 100%;
    }
    img {
      width: 200px;
      display: block;
      margin: 0 auto;
      padding-top: 10px;
      margin-bottom: 30px;
    }
    #container {
      margin: 0;
      width: 100vw;
      height: 600px;
      background: #fd4d3f;
      margin: 0 auto;
    }
    h1 {
      font-size: 30px;
      width: 450px;
      text-align: center;
      margin: 0 auto;
      margin-bottom: 100px;
      color: #141c3a;
    }
    p {
      font-size: 20px;
      width: 400px;
      text-align: center;
      font-weight: 400;
      margin: 0 auto;
      margin-bottom: 30px;
      color: white;
    }
    #color-button {
      width: 350px;
      height: 100px;
      border: none;
      font-size: 24px;
      background-color: #141c3a;
      color: white;
      display: block;
      margin: 0 auto;
      border-radius: 5px;
      cursor: pointer;
      margin-bottom: 5px;
      font-family: 'Nunito';
    }
    #next-button {
      width: 350px;
      height: 100px;
      border: none;
      font-size: 24px;
      background-color: #141c3a;
      color: white;
      display: block;
      margin: 0 auto;
      border-radius: 5px;
      cursor: pointer;
      font-family: 'Nunito';
    }
  </style>
</head>
<body>
  <section id='container'>
    <img src='http://pngimg.com/uploads/rainbow/rainbow_PNG5580.png'/>
    <h1>Random Color Generator</h1>
    <p>Find your new favorite color!</p>
    <button id='color-button'>Pick a Color</button>
    <button id='next-button'>Mystery Color</button>
  </section>
  <script>
    const button = document.querySelector('#color-button');
    const mysteryButton = document.querySelector('#next-button');
    const rnd = num => Math.floor(Math.random() * num);
    const rgbChange = () => {
      event.target.style.backgroundColor = `rgb(
        ${rnd(256)}, 
        ${rnd(256)}, 
        ${rnd(256)}
      )`;
    }
    const hslChange = () => {
      event.target.style.backgroundColor = `hsl(
        ${rnd(360)}, 
        ${rnd(101)}%, 
        ${rnd(101)}%
      )`;
    }
    button.onclick = rgbChange;
    mysteryButton.onwheel = hslChange;
  </script>
</body>
</html>

Save that on your computer in a folder called ‘Random Color Generator’ and name the file, index.html. Then rum it.

Now come back to the lesson and fill in the missing bits.

In Ex.7 Event Types (Random Color Generator) I can’t seem to find where ‘event’ is defined in the solution for the exercise. I don’t understand how the colorChange function can use ‘event’ when it doesn’t seem to be defined elsewhere in the file, nor does it seem to be passed in as a parameter for the function. Shouldn’t that create an error?

// This variable stores the "Pick a Color" button
let button = document.getElementById('color-button');

// This variable stores the "Mystery Color" button
let mysteryButton = document.getElementById('next-button');

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

// Write your code below
let colorChange = function() {
  let randomColor = 'rgb(' + rgb(255) + ',' + rgb(255) + ',' + rgb(255) + ')';
  event.target.style.backgroundColor = randomColor;
}
button.onclick = colorChange;
mysteryButton.onwheel = colorChange;

event is a global object which is temporarily bound to the mouse event. It’s target attribute is populated with the node that triggered it. that’s why the handler can assign a new value to its backgroundColor property.

1 Like

Ok that makes more sense. If you don’t mind a follow up question; does that mean ‘event’ is a reserved key-word? Or does that mean it is similar to the “Math” global-object? (Is there a convention that global objects should be capitalized?)

Thank you for your time in answering my previous question BTW

2 Likes

event is a global object, but I’m not sure it would qualify as a Class, such as Math. Classes are by convention capitalized. We can think of event as a property of the window object which is global.

window.event

i don"t understand how the variable ‘randomColor’ works ?? how the program change the result of this variable? seems like there is no link between it and the random number that is generated in the function ‘rgb’… and overall i just don’t understand this syntax : " let randomColor = ‘rgb(’ + rgb(255) + ‘,’ + rgb(255) + ‘,’ + rgb(255) + ‘)’; "

I was stuck on this one for a long time. I wish it was better explained in the lesson, good thing I looked in here for the answer/explanation.