So far, you’ve learned the basics; variables, and formatting. But how do you use those? This section will explain.

Interacting with the page can be done in a few ways. First, you will need to know how to access what you want.

To access an element in a page, you use the command ‘getElementById’. Heres an example:

Let’s say you have your image.

<img src="https://joeybabcock.me/images/satel.gif" id="satel"/>

To access it in javascript, you would use the following:

var satel = document.getElementById('satel');

Make sure the part in quotes (‘satel’) is the same as the id attribute of your image.

In javascript, you can edit HTML properties, as well as CSS and text. For example, (previously) on my homepage, the links at the top use used javascript. This is the code for them:

<a href="//joeybabcock.me/" onmouseover="i1.src='//joeybabcock.me/images/home/home2.png';" onmouseout="i1.src='//joeybabcock.me/images/home/home1.png';">
    <img src="//joeybabcock.me/images/home/home1.png" width="96" height="25" id="i1">
</a>

Note that image1.src is the same as the id I used for the image. You could also do

i1.style.width="300px";

You can edit most CSS properties with that. You can also set the content of an element, such as text or another element by doing ‘innerHTML’;