TypeError: nœud.setAttribute n'est pas une fonction

J'obtiens une erreur: "TypeError: élément.setAttribute n'est pas une fonction" quand j'essaie d'appeler la fonction suivante sur ma page web:

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);
    }
}

La mouseover() fonction est une fonction d'aide pour la list() fonction qui doit se déclencher lorsque l'événement onmouseover attribut est ajouté à l'élément dans la list() fonction.

Lorsque je charge ma page, la boîte d'alerte s'affiche et me donne l'erreur mentionnée ci-dessus.

C'est en fait l'ajout de tous les attributs de mes éléments, mais je ne comprends pas pourquoi cette erreur s'affiche. Parce que cette erreur provoque ça m'empêche d'exécuter une autre fonction à droite après cela, on charge.

Pourquoi est-ce une erreur de montrer?

Voici le document HTML que je suis en train de manipuler:

<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>

Lorsqu'un utilisateur passe avec la souris sur l'une des 3 images dans le div avec id="colors" l'arrière-plan de l'image dans la div avec id="image" devrait changer, et il ne veut vraiment changer, c'est juste que je reçois ce gênant d'erreur qui m'empêche d'exécuter un autre script dès que ce dernier se charge.

En ajoutant le code HTML aussi aider

OriginalL'auteur SineLaboreNihil | 2013-03-28

  1. 7

    Les Chances sont le nœud sur lequel vous appelez setAttribute() est un nœud de texte plutôt que d'un élément. La solution la plus simple est de vérifier l' nodeType de la propriété avant d'appeler setAttribute():

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

    Un côté: définition des attributs de gestionnaire d'événement tels que onmouseover via setAttribute() est généralement une mauvaise idée car il ne fonctionne pas comme spécifié dans les vieux IE (et les modes de compatibilité au plus tard IE). Utilisez la propriété équivalente à la place:

    item.onmouseover = function() {
    moveover(this.src);
};
    Je vous remercie beaucoup. C'est exactement le problème et vous l'avez résolu. 🙂

    OriginalL'auteur Tim Down