Keskustelu: Nettisivujen teko: Javascript: information[i] has no properties

Grahamer [14.01.2008 14:12:44]

Tarkoituksena on, että kun product-divin päälle vie hiiren, information-div katoaa. Tämä ei kuitenkaan onnistu. Javascript Console tietää kertoa: "information[i] has no properties". Mikä on pielessä?

<html>
<head>
<title>JS</title>
<script type="text/javascript">
<!--

window.onload = function(){
	var product = new Array();
	product[0] = document.getElementById('product0');
	product[1] = document.getElementById('product1');
	product[2] = document.getElementById('product2');
	product[3] = document.getElementById('product3');
	product[4] = document.getElementById('product4');

	var information = new Array();
	information[0] = document.getElementById('information0');
	information[1] = document.getElementById('information1');
	information[2] = document.getElementById('information2');
	information[3] = document.getElementById('information3');
	information[4] = document.getElementById('information4');

	for(i = 0; i <= 4; i++)
	{
		if(product[i]) {
			product[i].onmouseover = function() {
				this.style.color = 'red';
				information[i].style.display = 'block';
			};
			product[i].onmouseout = function() {
				this.style.color = 'black';
				information[i].style.display = 'none';
			};
		}
	}
};

//-->
</script>
</head>
<body onload="function()">
<div id="product0">tuote 0</div>
<div id="product1">tuote 1</div>
<div id="product2">tuote 2</div>
<div id="product3">tuote 3</div>
<div id="product4">tuote 4</div>
<div id="information0">info 0</div>
<div id="information1">info 1</div>
<div id="information2">info 2</div>
<div id="information3">info 3</div>
<div id="information4">info 4</div>
</body>
</html>

Merri [14.01.2008 14:44:15]

Minulla Firefox ilmoittelee vain jotta information[i] is undefined.

Ongelmasi johtuu siitä, että i:tä ei ole määritelty kyseissä funktiossa. Funktio on määriteltynä eri alueelle kuin loopissasi käyttämä muuttuja.

Ongelman voi kiertää evalilla, tosin funktion muotoilu hieman kärsii kun tekstimuuttujat eivät saa JavaScriptissä olla useampirivisiä (tai no, editorini ainakin herjaa siitä).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>JS</title>
<script type="text/javascript"><!-- //<![CDATA[

window.onload = function(){
    var product = new Array();
    product[0] = document.getElementById('product0');
    product[1] = document.getElementById('product1');
    product[2] = document.getElementById('product2');
    product[3] = document.getElementById('product3');
    product[4] = document.getElementById('product4');

    var information = new Array();
    information[0] = document.getElementById('information0');
    information[1] = document.getElementById('information1');
    information[2] = document.getElementById('information2');
    information[3] = document.getElementById('information3');
    information[4] = document.getElementById('information4');

    for(i = 0; i <= 4; i++)
    {
        if(product[i]) {
            product[i].onmouseover = eval('(function() { this.style.color =  \'red\'; information[' + i + '].style.display = \'block\'; })');
            product[i].onmouseout = eval('(function() { this.style.color = \'black\'; information[' + i + '].style.display = \'none\'; })');
        }
    }
};

//]]>--></script>
</head>
<body>
<div id="product0">tuote 0</div>
<div id="product1">tuote 1</div>
<div id="product2">tuote 2</div>
<div id="product3">tuote 3</div>
<div id="product4">tuote 4</div>
<div id="information0">info 0</div>
<div id="information1">info 1</div>
<div id="information2">info 2</div>
<div id="information3">info 3</div>
<div id="information4">info 4</div>
</body>
</html>

jlaire [14.01.2008 14:53:01]

Tässä toisenlainen toteutus:

function attach_handlers(n) {
    var product     = document.getElementById('product'     + n);
    var information = document.getElementById('information' + n);

    product.onmouseover = function () {
                              this.style.color = 'red';
                              information.style.display = 'block' }

    product.onmouseout = function () {
                             this.style.color = 'black';
                             information.style.display = 'none' } }

window.onload = function () {
    for (var i = 0; i < 5; i++) {
        attach_handlers(i) } }

Merri [14.01.2008 14:59:04]

Aloitusviesti kuvaa kyllä ongelman väärinpäin, Tarkoituksena on, että kun product-divin päälle vie hiiren, information-div katoaa. - tämän takia en tehnyt CSS-versiota, mutta nyt kun lopputulos näyttää olevan kuitenkin juuri se päinvastainen, niin CSS-versio olisi ihan käypä, riippuen siitä millainen lopputulos on hakusessa.

Grahamer [17.01.2008 23:36:06]

Meni vaan allatiivit ja ablatiivit sekaisin :)

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku