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!
I’ve fallen at the first hurdle here.
Question one.
What am I doing wrong?
// These variables store the boxes on the side
let itemOne = document.getElementById('list-item-one');
let itemTwo = document.getElementById('list-item-two');
let itemThree = document.getElementById('list-item-three');
let itemFour = document.getElementById('list-item-four');
let itemFive = document.getElementById('list-item-five');
let resetButton = document.getElementById('reset-button');
// This function programs the "Reset" button to return the boxes to their default styles
let reset = function() {
itemOne.style.width = ''
itemTwo .style.backgroundColor = ''
itemThree.innerHTML = 'The mouse must leave the box to change the text'
itemFive.hidden = true;
};
resetButton.onclick = reset;
// Write code for the first list item
itemOne.mouseover
// Write code for the second list item
// Write code for the third list item
// Write code for the fourth list item
I first had issues when trying the “mouseover” and noticed you had to use ONmouseover when doing the itemOne.onmouseover; , but then i had som issues with step 2. I noticed though that it works fine when using the addEventListener. So if you are having issues, try to use itemOne.addEventListener(‘mouseover’, function() {});
And notice that when using the addEventListener you are NOT using ONmouseover, but only mouseover.
Listeners are attached to DOM nodes (or the document object, itself) and are used to detect a particular event such as a click or a mouse movement (or a key press). They are methods of the window object.
A handler is a function we write and assign to the listener which will invoke it on a triggered event.
function handler(event) {
// action on event target node, perhaps?
}
domnode.onclick = handler
node method function
I don’t understand the way information is presented in this lesson. It feels like someone is addressing me like they would a toddler, only they don’t have kids so they use too many unfamiliar words, and forget to share half the information.
Instruction 2: Now, assign an anonymous event handler function that changes the width of itemOne to any size greater or less than 400px .
Why? How much? Where? I just wrote
Instruction 1: First, create an event handler property on itemOne when the mouse hovers over it.
What I’m reading is that, although I just assigned an onmouseover to itemOne, I now have to add an eventlistener for the event inside the eventHandler. What I’m reading is that I’m supposed to do his:
itemOne.onmouseover = function () {
itemOne.addEventListener("mouseover", ?????)
}
So my question is: how am I supposed to interpret these instructions? Can someone word it differently for me?
I have another thing: if I reset the workspace, I start with a red cross through the first instruction’s checkbox, and the error pop-upmessage. It seems not to entirely reset.
Update: when I go to the previous page, and then come back, the exercise is completely reset.
So the confusion between listeners and handlers is cleared up somewhat, also thanks to the earlier reply of @mtf
I do think there may be a bug in the first two assignments. I wrote this answer before, as one of the attempts before I reset the lesson entirely (see my question below), and then it was not approved as correct.
After the reset, it was.
I’m the opposite to everyone here!! on task 2 it’s asked us to change itemOne to any size greater than 400px. At first I’ve passed it straight away thinking I’ve understood but then I’ve reseted the code just to make sure and it’s turned out that it’ll pass me regardless!! It even passes me when I didn’t even type in any code! NOT HAPPY!! I’m here to learn!
OK, cAcademy really needs to fix this issues!All the way up to task 5 it’ll let you pass the test no matter what you code and luckily I have the patients and willing to learn so I’ve managed to practice and understood how to do those coding myself as I can see the width has change, the colour has changed when associated it with events.
This is no good as I could of just pass through it without knowing that I wasn’t learning anything!
I had a problem with task 2, and most likely people in future would have problem with this same thing because the actual error is very obscure for us to notice.
assign an anonymous event handler function that changes the width of itemOne to any size greater or less than 400px
And we assign it as a number which causes the problem, we should put any value either less or greater than 400px inside a pair of quote marks like this ‘300px’.
Hope this helps
let itemOne = document.getElementById('list-item-one');
let itemTwo = document.getElementById('list-item-two');
let itemThree = document.getElementById('list-item-three');
let itemFour = document.getElementById('list-item-four');
let itemFive = document.getElementById('list-item-five');
let resetButton = document.getElementById('reset-button');
// This function programs the "Reset" button to return the boxes to their default styles
let reset = function() {
itemOne.style.width = ''
itemTwo .style.backgroundColor = ''
itemThree.innerHTML = 'The mouse must leave the box to change the text'
itemFive.style.display = "none"
};
resetButton.onclick = reset;
What confuses me lately is why are we using let when declaring functions.
From my understanding from previous JS lessons is that if we don’t intend on changing the variable later we should assign it using const
Many typo’s in this lessons ‘Instructions’ sections, and some problems with mismatches between the already provided code and the expected code in the tester functions. Please review this whole lesson as parts of it are currently impossible to pass without taking so much initiative as to rewrite the already provided code we’re supposed to build off to complete the exercises? Very frustrating.
) below.
) to up-vote the contribution!