Ask coding questions

← Back to all posts
Any mistake?
MitzyMacias (2)

I don't see the mistake, it works perfectly but when I submitted in my challenge it said there was a mistake in the style of the functions. Can anyone see something? thanks.

Comments
hotnewtop
Kognise (449)

Hey, I've moved this to the Ask board - in the future please try to ask questions there. Thanks!

RolandJLevy (1083)

...also, you could use one function with parameters instead of four individual functions. Something like this:

HTML
<section id="ingredients" onmouseover="buttonToggle('ingredients', '300%')" onmouseout="buttonToggle('ingredients', '100%')">
JavaScript
function buttonToggle(id, size){
  document.getElementById(id).firstElementChild.style.fontSize = size;
}
RolandJLevy (1083)

Hi @MitzyMacias, your HTML, CSS and JavaScript is good. The mistake they may be talking about could be having firstElementChild twice in the function. You only need firstElementChild once. The functions should be like this example:

function ingredientsHover(){
 document.getElementById('ingredients').firstElementChild.style.fontSize = "300%";
}
MitzyMacias (2)

@rjlevy hi, I just copied from the video of the day, they showed it as typed twice. Thanks anyway.

RolandJLevy (1083)

@MitzyMacias, ah OK. I understand now - you just want the icon to increase / reduce in size.

For this type of behaviour it might be better to use CSS. This example I forked from your repl shows the 'Info' header with CSS hover behaviour: https://repl.it/@rjlevy/Lesson-5-Challenge-3-1

Good luck with your project 👍

johnnyfrancis (24)

don't think there is any, but maybe you did not make it the right way for the challenge??