4

Web ページで次の関数を呼び出そうとすると、「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()onmouseoverlist()

ページを読み込むと、アラート ボックスがポップアップ表示され、上記のエラーが表示されます。

実際にはすべての属性を要素に追加していますが、このエラーが表示される理由がわかりません。このエラーがトリガーされているため、この関数が読み込まれた直後に別の関数を実行できません。

このエラーが表示されるのはなぜですか?

操作しようとしている 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>

ユーザーがマウスを div の 3 つの画像の 1 つの上に置いて、divid="colors"の背景画像を変更するid="image"必要があり、実際に変更する必要がある場合、すぐに別のスクリプトを実行できないという迷惑なエラーが発生するだけです。これはロードします。

4

1 に答える 1

7

呼び出しsetAttribute()ているノードは、要素ではなくテキスト ノードである可能性があります。最も簡単な解決策は、nodeType呼び出す前にプロパティを確認することsetAttribute()です。

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

onmouseover余談ですが、 viaなどのイベント ハンドラー属性を設定するsetAttribute()ことは、古い IE (および後の IE の互換モード) で指定されたとおりに機能しないため、一般的に悪い考えです。代わりに同等のプロパティを使用します。

item.onmouseover = function() {
    moveover(this.src);
};
于 2013-03-28T15:59:08.213 に答える