Question

I have an javascript array that is hard coded into my javascript file:

var avatar_layers = new Array('background', 'body', 'hair', 'shirt', 'arms', 'legs', 'feet', 'weapon')

As it is hardcoded, it is difficult to use it between different HTML files.

I would like to change it so the javascript will look for all the h3 tags that have a class of title on the page and use the content of these tags to create the array.

How can I do this?

After reading around, I have found that I should use the following

document.getElementsByTagName(“h3.title”)[0];

This will get all the h3.titles. However, I am not sure how to output the collected data as array.

I would really appreciate any pointers. Thanks!

Update: I can’t use Jquery, it has to be regular java script

You can see my code here: http://jsfiddle.net/zk5Hn/2/

Answer 1

​var array = [];

(function(){
    var elements = document.getElementsByTagName("h3");
    for (var i = 0; i < elements.length; i++) {
        array.push(elements[i].innerText);
    }
})();

​alert(array);​

try that.

http://jsfiddle.net/Jsckt/

alternatively you could use jquery:

$(function(){
    var array = [];

    $("h3.title").each(function() {
        array.push(this.innerText);
    });

    alert(array);
}​;​

http://jsfiddle.net/Jsckt/2/

5 years later edit:

1. one should avoid using innerText theese days for performance and expectational reasons
2. you can explode DOM node lists to arrays now

there you go with a up2date solution for 2018 onwards:

const headings = [...document.querySelectorAll("h3.title")].map(node => node.textContent);
alert(headings);