Fun with JavaScript's getElementByID() Method

JavaScript can find html elements on your webpage by id and then do things to them.

In our examples, we will use paragraphs and have them change by clicking a button (using JavaScript's onclick event).

Changing HTML, Example 1, same as W3Schools

JavaScript can change HTML content.

Changing HTML, Example 2, you fill in the blanks

What is the best class at Medford High School?

Changing HTML, Example 3, fill in more blanks

What day is tomorrow?

Changing HTML, Example 4, same as W3Schools

JavaScript can change HTML attributes.

In this case JavaScript changes the src (source) attribute of an image.

Changing HTML, Example 5, you fill in the blanks

Extra credit challenge

Can you create your own image swap? You will need to find 2 different images and make sure to change your image id names.

Changing CSS, Example 1, same as W3Schools

JavaScript can change the style of an HTML element, such as the font size.

Changing CSS, Example 2, you fill in the blanks

JavaScript can change my text color!

Changing CSS, Example 3, you fill in the blanks

JavaScript can change the font family!

Hiding Elements, Example 1, same as W3Schools

JavaScript can hide HTML elements.

Revealing Elements, Example 1, same as W3Schools

Hello JavaScript!

Can you hide this image?

Can you make a cupcake appear out of thin air?