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.
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.
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.
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.
var t=[5, 6, 9, 15, 7];
for (i=4;i>=0;i--) this.innerHTML+=t[i]+ " ";
<img id="im1" src="pic.jpg">
var t=document.getElementById("im1").src;
var nr=t.length;
alert(nr);
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);
https://www.w3schools.com/js/js_arrays.asp;
https://www.w3schools.com/jsref/met_document_queryselectorall.asp.
