TypeError: node.setAttribute не является функцией

Я получаю сообщение об ошибке: «TypeError: item.setAttribute не является функцией», когда пытаюсь вызвать следующую функцию на своей веб-странице:

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

Функция mouseover() является вспомогательной функцией для функции list(), которая должна срабатывать, когда атрибут события onmouseover добавляется к элементу в функции list().

Когда я загружаю свою страницу, появляется окно с предупреждением и выдает мне вышеупомянутую ошибку.

На самом деле он добавляет все атрибуты к моим элементам, но я не понимаю, почему появляется эта ошибка. Поскольку эта ошибка срабатывает, она не позволяет мне запустить другую функцию сразу после загрузки этой.

Почему появляется эта ошибка?

Вот документ HTML, которым я пытаюсь манипулировать:

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

Когда пользователь наводит указатель мыши на одно из 3 изображений в div с id="colors", фоновое изображение в div с id="image" должно измениться, и оно действительно меняется, просто я получаю эту досадную ошибку, которая мешает мне запустить другой скрипт как как только этот загрузится.


javascript error-handling try-catch html setattribute
person SineLaboreNihil    schedule 28.03.2013    source источник
comment
Добавление HTML тоже поможет   -  person Clyde Lobo    schedule 28.03.2013

Ответы (1)


arrow_upward
7
arrow_downward

Скорее всего, узел, для которого вы вызываете setAttribute(), является текстовым узлом, а не элементом. Самое простое решение — проверить свойство nodeType перед вызовом setAttribute():

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

В стороне: установка атрибутов обработчика событий, таких как onmouseover через setAttribute(), как правило, является плохой идеей, потому что она не работает, как указано в более старых IE (и режимы совместимости в более поздних версиях IE). Вместо этого используйте эквивалентное свойство:

item.onmouseover = function() {
    moveover(this.src);
};
person Tim Down    schedule 28.03.2013
comment
Спасибо большое. Это была именно проблема, и вы решили ее. :) - person SineLaboreNihil; 28.03.2013