CODEWITHSUNDEEP
javascripthtmlnodelist
mused
mused

Reputation: 23

Javascript: getAttribute() returns object NodeList?

So what I'm trying to do is display a series of images based on the value of their HTML "id" attribute, which is also the name of their image file. I have written a Javascript code that will build the src url for each image in the series (ignore the silly class name):

var idnum = document.querySelectorAll(".trollface")[0].getAttribute("id");

var tribe;
if (idnum < 116903 && idnum > 100000) {
    tribe = "Xana";
} else if (idnum < 213403 && idnum > 200000) {
    tribe = "Hemi";
} else {
    tribe ="Theri";
} 

var icon = document.getElementsByClassName("trollface");
for(var i = 0; i < icon.length; i++) {
    icon[i].src = "Dot_files/" + tribe + "/Icons/" + idnum + ".png";
}

This works fine, however as you can see with this, all the images will have the same src as the first image in the series, which is not what I want.

The main problem I'm having is getting the values of each img's id attribute and using them for their own img src url.

I've tried iterating through the id's with

var idnum = document.querySelectorAll(".trollface");
for(var x = 0; x < idnum.length; x++) {
    idnum[x].getAttribute("id");
}

but in Chrome the value of idnum is "[object%20NodeList]", which I presume is an object NodeList. This in turn leads to an ERR_FILE_NOT_FOUND (or something similar to that) because the output url becomes Dot_files/Theri/Icons/[object%20NodeList].png, which doesn't exist.

With this I tried to convert the NodeList to an array, but still got the same result in Chrome.

So what I want to ask is: How come the getAttribute("id") doesn't work when I iterate through all the elements with the class trollface? It works fine if I just use the single line of code shown in the first snippet above. Also is it fine to iterate twice, as I iterated once with idnum and a second time with icon. Does this have anything to do with my problem?

Is there a workaround to this? I've been at this for a few days now, with no clue how to proceed.

Thanks for any help and sorry for the long post. I can provide more details/explanation if needed.

Upvotes: 2

Views: 1553

Answers (1)

Ram
Ram

Reputation: 144659

No, it doesn't. You get that result if you concatenate the idnum variable not the returned value of the getAttribute method, getAttribute returns a string not a nodeList. You don't store the returned values of the getAttribute calls, where do you use them? idnum[x].getAttribute("id"); by itself effectively doesn't do anything. That line gets the value and throws it away.

Also it seems you don't move the if logic into your second iteration. 

var idnums = document.querySelectorAll(".trollface");

Array.prototype.forEach.call(idnums, function(el) {
    var tribe, id = el.id;
    if (id < 116903 && id > 100000) {
        tribe = "Xana";
    } else if (id < 213403 && id > 200000) {
        tribe = "Hemi";
    } else {
        tribe ="Theri";
    } 
    el.src = "Dot_files/" + tribe + "/Icons/" + id + ".png";
});

Upvotes: 2

Related Questions