TypeError：node.setAttribute不是一个函数 [英] TypeError: node.setAttribute is not a function

问题描述

我收到一个错误：TypeError：item.setAttribute不是一个函数当我尝试在我的网页上调用以下函数：

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

mouseover（） / code> function是一个帮助函数，用于 list（）函数，当事件 onmouseover 属性被添加到 list（）函数中的元素。

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.

为什么这个错误出现？

以下是我要操作的HTML文档：

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>

当用户将鼠标悬停在div中的3个图像中的一个时， id =colors具有 id =image的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.

推荐答案

机会是其上的节点你正在调用 setAttribute（）是一个文本节点而不是一个元素。调用 setAttribute（）之前，最简单的解决方案是检查 nodeType 属性：

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
}

$ b $一般来说，通过 setAttribute（）设置事件处理程序属性，例如 onmouseover 这是一个坏主意，因为它不能像以前的IE（和后来的IE中的兼容性模式）中指定的那样工作。使用等效属性：

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

这篇关于TypeError：node.setAttribute不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！