Instructions

Let's see how the DOM (Document-Object Model) works in JavaScript!

The goal is to change this div tag using JavaScript.

First things first, we need to find some way to reference (talk about) this div in our JavaScript. It helps if the div tag has a name -- click on the ID input box on the upper left and type out an ID.

After giving it an ID, look at all the input boxes on the right. Try typing different values for the text, colors, and border.

Once you have finished, click the GO! button. It will show you, line by line, the JavaScript necessary to change the div tag according to the descriptions that you wrote.

If all of the lines of code go by too fast or too slow, feel free to change the transition speed.

ID:

Hello world!

I am a div.

The ID of this div is: N/A

Hello world!

I am a div.

Change text:

Change background color:

Change text color:

Change border:
px solid

Transition speed:

JavaScript code showing the transition: