TypeError: node.setAttribute is not a function

Question

I'm getting an error: "TypeError: item.setAttribute is not a function" when I try to call the following function on my webpage:

function list() {
    var colors = document.getElementById('colors');
    var colors = colors.childNodes.length;
    for (var i = 1; i < broj; i++) {
        var item = colors.childNodes.item(i);
        item.setAttribute("id", i);
        item.setAttribute("onmouseover", "moveover(src)");
        item.setAttribute("alt", "Color");
        item.hspace = "2";
        item.height = "23";
    }
}

function moveover(colorAddress) {
    var source = colorAddress;
    var image = source.slice(0, source.length - 4);
    var start = "url(";
    var extension = ".jpg)";
    var newImage = start.concat(image, extension);
    document.getElementById('image').style.backgroundImage = newImage;
}

window.onload = function() {
    try {
        list();
    } catch (err) {
        alert(err);
    }
}

The mouseover() function is a helper function for the list() function that should fire when the event onmouseover attribute is added to the element in the list() function.

When I load my page the alert box pops up and gives me the above mentioned error.

It's actually adding all the attributes to my elements but I don't understand why this error is showing up. Because this error is triggering it's preventing me from running another function right after this one loads.

Why is this error showing up?

Here is the HTML document I'm trying to manipulate:

<div id="image" style="background-image: url(images/nova_brilliant/1.jpg)"></div>
<div id="tekst">
     <h1>Nova Brilliant</h1>

    <div id="contents">
        <p>Hover with your mouse over the desired color to see the kitchen in that color:</p>
        <div id="colors">
            <img src="images/nova_brilliant/1.gif">
            <img src="images/nova_brilliant/2.gif">
            <img src="images/nova_brilliant/3.gif">
        </div>
        <p>Other available colors:</p>
        <div id="others">
            <img src="images/nova_brilliant/4.gif">
            <img src="images/nova_brilliant/5.gif">
            <img src="images/nova_brilliant/6.gif">
        </div>
    </div>
</div>

When a user hovers with their mouse over one of the 3 images in the div with id="colors" the background image in the div with id="image" should change and it really does change, it's just that I get that annoying error which prevents me from running another script as soon as this one loads.

Answer 1

Chances are the node on which you're calling setAttribute() is a text node rather than an element. The easiest solution is check the nodeType property before calling setAttribute():

var item = colors.childNodes[i];
if (item.nodeType == 1) {
    // Do element stuff here
}

An aside: setting event handler attributes such as onmouseover via setAttribute() is generally a bad idea because it doesn't work as specified in older IE (and compatibility modes in later IE). Use the equivalent property instead:

item.onmouseover = function() {
    moveover(this.src);
};