Lessons menu
JavaScript - advanced - Lesson nr. 7
What this lesson is about?

In this lesson we will learn about how to store multiple data in one variable. Until now, we could not retrieve the elements of a document by class or tag name, because the methods used for that, return more values in an array.

New methods in this lesson:
getElementsByClassName(the name of the class) – with this method of the document and other HTML objects we can access elements using their class name. It works like the getElementById method, only the result may be a list of multiple elements (as the name indicates). The result is an array of objects, and can be handled as one.

getElementsByTagName(the name of the tag) – with this method of the document and other HTML objects we can access all the elements having the same HTML tag/same type. The result is an array.

querySelectorAll(the name of the selector) – this method can be used for finding elements by tag name, class name, but it can be used to add more complex searches by combining more classes, tags and other selectors.

charAt(index)– with this method of a string object we can ask for a letter from the text, from the position defined as parameter.

New property in this lesson:
length – a property with this name is used by strings and by arrays too. We can ask for the number of elements for an array. When we define an array we get an object, so this property is referred with the name of the array attached before its name.

What is an array?
An array is data type. A variable of this type contains a list of values. Usually the values are mostly the same type (it can be numbers, strings, date or objects, even other arrays).
The arrays are great, because we can use one name to refer to a list of elements, without taking regard of the number of elements – it can be changed.

Using arrays we need to define one:
var t=[1, 2, 3, 4]; a=["x", "y", "v", "w"]
Every element of an array has a sequence number and can be reached using this number. This “numbering” begins from 0. Knowing this sequence number we can access/change every element.

Example on accessing all elements to change them all to 5:
for (i=0;i<t.length;i++) t[i]=5;

Example on defining and using an array:

In the example above we defined an array with some color names included.

The set function is called if the div is clicked and changes its background color. We use the length property to find out how many elements are there in the array. So, if we add some colors later, we won’t have to correct the code, as we go through all of them with a loop.

We generate a random number between 0 and 4 (Math.random() generates numbers in the [0, 1) interval). We can refer to one of the elements using the number generated. This will be the color used.

Example on using getElementsByClassName:

In the example above we have three different HTML elements using the same class for CSS settings.

Clicking on the button (the last one), the color of the text changes to orange in all three elements. We get the reference to them by using the getElementsByClassName method. The array with the results is d_elements.

Every item in this array is an HTML element/object.

Example on using sequence numbers on strings

In the example above we can see how the charAt method works. There is the word Firefox and an array with numbers – with the possible indexes of the word.

The first loop adds the letters of the word in the original order to the first paragraph. We could add it at once, but this way we get to put spaces between the letters.

The second loop adds the same letters in an order defined by the t array.


1. Modify the aspects.html file, by adding randomly one of the four quotes below, replacing the quote from the image. The quotes are: "Extreme programming is an emotional experience.", "In theory, theory and practice are the same. In practice, they’re not.", "Measuring programming progress by lines of code is like measuring aircraft building progress by weight.", "The best thing about a boolean is even if you are wrong, you are only off by a bit."

Implement the following steps:
  • The selection and injection of the quote should happen when the page is loaded, so tie the function to the onload event of the body tag.
  • Add the four quotes to an array.
  • Identify the div to “write” in, randomize an index to the array and insert the quote.
View the result
2. Modify the toplangs.html file, by resizing the font size of the SVG drawing to 24px, if the cursor is moved over the drawing and restored it to (18px) if the cursor is removed. You may search for every <text> element and put them in an array.
View the result
3. Modify the forms.html to evaluate the multiplying test we previously constructed:
Create the function to be called if the submit event happens.
You may create a list of the elements of the form (if you use “*” as tag name), do not use the submit button’s value.
You have the original question as value of the placeholder property – calculate the correct answer. Compare it to the value introduced in the textbox.
Count the correct answers and show the result.
View the result
4. Modify the gallery.html file, by adding a caption to the pictures from the random pictures part. The captions should be 8 random words or sentences of your liking, which you should add to an array.

You may need to know that the change event does not work with image so you need to call the function handling this task twice: once from the function that handles the random change and one that handles the range element.

The easier way is to give as parameter the number of the picture. Depending on how you handled the problems so far you may need to get the number from the image name. If you do that you may need to know that the src property contains the absolute path to the image so it is easier to find the number searching from the end.
View the result
1. Examine the code below and select the most correct description of it:

var t=[5, 6, 9, 15, 7];
for (i=4;i>=0;i--) this.innerHTML+=t[i]+ " ";

2. Which one of the methods below has no array as a result?
3. Examine the code below. What is the result displayed?

<img id="im1" src="pic.jpg">
var t=document.getElementById("im1").src;
var nr=t.length;

4. Examine the code below. What is the result displayed?

var text="A Truth thats told with bad intent Beats all the Lies you can invent";
var nr=text.length;
var i=nr-5;
var j=5;
this.innerHTML=text.charAt(i)+" "+ text.charAt(j);

Supplementary information
You can read about links and you can exercise visiting the following links:
Exclamation mark This site is using cookies. By continuing to browse the site, you accept their use! I accept