Chasing the Bunny: Mouse Events, Attributes, and the multiple paths to changing your page
Published: 2022-09-07 15:30:27

Let’s say you’re me. Let’s say you get an assignment to make a web page to introduce yourself. It’s a pretty basic ask: just some HTML, some CSS, and some simple JavaScript events to make it pop. Should be no problem, right?

Let’s also say you’re feeling a little creative, a little silly. Let’s say that instead of making a basic thing where you click a button and it says, “Hi! I’m me and here’s some more words!”, you want to do something else. Let’s say you want to make people chase a bunny.

## SECTION 1: FIRST STEPS....LITERALLY

Cool! How are you planning on doing that? You did learn recently that you can use an onmouseover event to change the position of an image. That can look as simple as this (if you're not feeling too keen on making a whole separate .js file):


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucun7g4c56ehgyvzemv4.png)

Fun, right? While that is pretty neat, there's two big problems. 

Problem #1: somebody somewhere is going to be annoyed with you about putting JavaScript inside your HTML. I mean, I guess they have a point, it does look funky in there with the <tags> all over the place.

Problem #2: Okay great, you made a bunny move 200px in one direction. What's next??

## SECTION 2: DISAPPEARING BUNNIES


What if instead of having one bunny move one time, you wanted the bunny to move around multiple times? One way to do this would be my patented Disappearing Bunnies trick®. Instead of a single moving bunny you could have multiple bunnies popping in and out of visibility with custom CSS profiles for each image!  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfexdibqdi5cdmezph3q.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/erq1p2zqxpdy51922a4t.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oatqgqbkbrgtxeqgafn5.png)



“Wow!”, you think to yourself. “That sure is fun AND inefficient!” You're right, it is definitely both of those things. While it satisfies your goal of having the bunny bounce around the page (at least as far as the user can tell), it's certainly not as elegant as you'd like to think you can be. So what do we do now??

## SECTION 3: ATTRIBUTES AND YOU

Huh. If you can change a CSS value with a JavaScript function, what else could you change inside your HTML? If you answered “all of it!”, I'd ask you to be more specific and to slow down because we're totally not there yet. But if you answered “Attributes!”, I'd be pleased that you're reading the titles of each section for context clues about where we're going next.

The function .setAttribute() is a built-in feature of JavaScript, and it does exactly what it says on the box. You give it a target, an attribute name, and a value, and it'll put anything you want into your HTML tags. You could say, “hey .setAttribute(), I want you to put 'my neighbor needs to mow his yard' into that span tag and set the value to 'oh my god he totally does',” and .setAttribute() won't even look at you funny. Everyone else will, of course, but .setAttribute() is here to do whatever you need without judgment. What's that you say? “Weren't we talking about bunnies?” Yes! Right! Thank you! 

Looking back at the previous two examples, maybe you can use .setAttribute() to change the onmouseover event in the image tag? Instead of having four separate image tags, you could have only one and change it multiple times. That could work, you already have the CSS set up and everything. Just remove all of that malarkey about hidden and visible and you're set. But how would we set that up in JavaScript? Maybe it would look something like this: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwiwt2zcoy7mn39l06a1.png)


You could change the 'id' tag to point at a different style with your positions already set up and change the 'onmouseover' tag to whatever the next function is in the chain! It's brilliant!

## SECTION 4: FOR SMARTER PEOPLE THAN I WAS WHEN I GOT THIS ASSIGNMENT

Now you're probably thinking, “wait a minute. There's like a hundred better ways to do this. You could set up an event listener in your JavaScript rather than throwing that function call directly into the HTML. Or when you mouse over the bunny you could have it generate a new function based on how many times you've already tried to call the function. You could even have it generate a random movement within set parameters!” And you'd be right, you could totally do all of those things and they would be super cool and fun. However I was not even aware that any of that was possible when I got this assignment and if you're being me in the scenario this whole post is predicated on then you're totally not abiding by the rules established in your character's generation, so I'm not even going to talk about that stuff here. Thank you in advance for your understanding and cooperation!

## ADDENDUM:
here's the page in question if anyone wants to see this in a semi-finished state: https://thomasrcham.github.io/my-prework-project/

and here's the code on github if you're interested:
https://github.com/thomasrcham/my-prework-project