Week 3: JavaScript Exercise – Sylvia Lee (Chen)


The exercise was about using JavaScript to change image and content.

I first gave all the buttons the same styling, but realized that the third button is longer than others because it has longer content. So I gave the third button id = “longButton”  and made it longer in the css. (#longButton{ width: 9em; })

Once I learned the way to call for an image in JavaScript, it was not hard to change the image. I gave each button a function so that when you click Boogie Left, the cat will move towards left but when you click Boogie Right, it will come back to its original direction.

Changing the caption was harder, because the changed caption had a red box around it. I found out that I can do the styling by setting the border. For this, I had to add style it in css first to make differences in JavaScript. So I gave the caption id = “caption”. And in css, made the border-style: hidden. After this, I could make the border-style solid in JavaScript, and .style.borderWidth = “medium”. Then I changed the color to red and added padding. For the box to be not the full width of the page, I set the width of #caption in css.

What I could not change was the gap between the buttons. I wanted to make the buttons closer but changing the margin or padding of the content, the buttons div, or each buttons did not work. I also wanted to make the caption come back if the button is pressed again, but adding two functions to one button only overwrote the last function.