Let's make things change
but keeping all of your code in the
<head> of your document keeps your code legible and organized.
In the example you are making today, the
Although you can technically put miles of code inside these event attributes, please don't.
Instead, have them call a function that is defined in the code inside
Changing your HTML
.innerhtml attribute of an HTML object.
When a web browser displays a page, it organises all the blocks of HTML code into objects nested inside each other. It can refer to these objects in a couple of ways:
document.body.h1refers to the first
h1tag inside the
bodyof a document
document.getElementById("someID")refers to the HTML element with
Once you get a reference to a specific element, you can change the HTML inside it. For example,
document.getElementById("elementID").innerhtml = "Here piggy, piggy!";
replaces everything inside the tag with elementID with Here piggy, piggy!
Saving your work
Open your editor and save the empty document as "
- Enter the example code below
- Customize it to match your style, but don't lose the click function
- You do not need to keep all of the comments, but add ones that explain the basics
Extend and expand
Add a whole bunch of writing and other HTML tags in your document that have
Then add more buttons.
Can you figure out how to make text clickable?
Can you figure out how to make an image disappear when you click on it?
How about making an image appear when you click a paragraph?