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 () 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 () below!
Agree with a comment or answer? Like () to up-vote the contribution!
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
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.
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?
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.
// 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
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.
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
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.
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) + ‘)’; "
It seems unfortunate that this entire portion of the course does not mention the differences between an onclick assignment and an event handler which listens for a click.
It’s an annoying topic for me, because legacy browsers seem like a survival of the fittest scenario. Seriously. If there was a tinder for friendship, I would swipe left on any IE user. I’m sorry; we can’t all be winners.
Anyway, it would be very helpful for the new user to describe that event listeners can trigger multiple handlers while onclick assignments cannot. It would also help to explain why they both exist, and when it is advantageous to use either.
A sprinkle of legacy browsers may be good too, though I agree it is somewhat tangential and political
They’re global, and only see the top layer of the bubble. Much of the time this is useful. The full extent of propagation is of no importance (to it). Anything deeper is up to the author to explore.
) below.
) to up-vote the contribution!