---
title: "Mouseover fungerar på en länk men ej på andra"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/167399-mouseover-fungerar-på-en-länk-men-ej-på-andra"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "m_soderlund"
published: "2007-12-19T16:49:42.000Z"
updated: "2007-12-20T12:29:43.000Z"
replies: 3
views: 584
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/167399-mouseover-fungerar-på-en-länk-men-ej-på-andra"
---

# Mouseover fungerar på en länk men ej på andra

## #1 — m_soderlund, 2007-12-19T16:49Z

Jag letar rätt på element programmatiskt m h a javascript och lägger på ett onmouseover-event.

Jag har följande HTML:

```
<div class="module">
    <h2><a href="#1">Module #1</a></h2>
    
    <div class="content">
        <ul>
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">Lorem H&amp;H</a></li>
            <li><a href="#">Dolor consecutor amis</a></li>
        </ul>
    </div>
</div>

<div class="module">
    <h2><a href="#2">Module #2</a></h2>
    
    <div class="content">
        <ul>
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">Lorem H&amp;H</a></li>
            <li><a href="#">Dolor consecutor amis</a></li>
        </ul>
    </div>
</div>
```

Med hjälp av detta javascript letar jag rätt på alla \<div class="content"\> och sedan länkarna:

```
window.onload = function()
{
    var elem = getElementsByClassName(document, "div", "content");
    
    if (elem.length>0)
    {   
        for(var i=0; i<elem.length; i++)
        {
            var e = elem[i]; // div with content class
            var myElem = e.parentNode.getElementsByTagName("a")[0]; // get anchor in h2 element
           
            if (e != null)
            {            
                if (i != 0) // hide divs with class="content" (except first one)
                {
                    e.style.display = 'none';
                }
                
                myElem.style.border = 'solid 1px #111';
                
                myElem.onmouseover = function()
                {
                    e.style.display = 'block';
                    elem[0].style.display = 'none';
                }                                
            }
        }
    }
}
```

Problemet är bara att onmouseover-eventet bara fungerar för sista \<div class="content"\> och aldrig på den/de tidigare.

Meningen med scriptet är att det vid hovring av en länk ska visa innehåll nedanför länken i dess container medan de andra containrarna (\<div class="content"\>) ska döljas.

Det är alltså myElem som onmouseover ska fungera för. Jag har även lagt på en border på myElem och det fungerar som det ska.

All hjälp mottages tacksamt! :)

Permalänk: https://www.webforum.nu/p/167399

## #2 — nitro2k01, 2007-12-19T18:16Z

Det grundläggande felet du har gjort är ett andtagande om scopes. **for**\-loopen har inget eget scope, utan för varje runda av **for**\-loopen så skrivs din variabel **e** över i scopet för **onload**\-funktionen, trots att du använder **var**. Detta beteende var nytt för mig också, och något jag såg under testningen nu.
Detta löste jag genom att lägga en **var** inom en inre funktion **(function(){...})();** vilket skapar ett nytt scope för varje runda. Skillnaden här är att variabeln **thisindex** tilldelas under varje runda, så den lider inte av överskrivningsproblem. I samma funktion tilldelar jag även event-handlern. **elem** ligger i **onload**\-funktionens scope och är statisk under alla **for**\-rundor, och behöver därmed inte klonas individuellt till under-scopet.

Jag antar att du inte vill dölja den första diven, (**elem\[0\].style.display = 'none';**) utan den senast öppnade? Detta gör du bäst med en for-loop som går igenom elementen och jämför index.

Dessutom har du onödigt mycket kontrollkod. **if (elem.length\>0)** är helt onödigt då loop-villkoret **i\<elem.length** ändå inte låter loopen köra ens en första runda om **elem.length==0**. 
En annan sak är **if (e != null)**. Om inte din **getElementsByClassName**\-funktion är extremt dålig ska den aldrig returnera **null**\-element. På sin höjd kan det hända att du får odefinierade element av olika skumma anledningar (Generellt, inte specifikt för detta skript) Det du ska kontrollera då är **if('undefined' != typeof array\[index\]){/\* Saker är ok \*/}**
Detta ska du göra direkt på array\[index\]. Kör du en sats som var element = array\[index\]; så kommer skriptet packa ihop redan där och du får ingen chans att inspektera element.
Dessutom kör du ju **e.parentNode.getElementsByTagName("a")\[0\];** innan du kollar om **e** är **null**, vilket isf skulle få skriptet att ge upp redan där om **e** av någon anledning faktiskt var **null**!

Om du vill kan jag berätta mer om skillnaden mellan **null** och **undefined**.

Nåväl, här är min lösning:

```
window.onload = function()
{
    var elem = getElementsByClassName(document, "div", "content");

	for(var i=0; i<elem.length; i++)
	{
		var e = elem[i]; // div with content class

		var myElem = e.parentNode.getElementsByTagName("a")[0]; // get anchor in h2 element

		if (i != 0) // hide divs with class="content" (except first one)
		{
			e.style.display = 'none';
		}

		(function(){	// Inner scope
			var thisindex=i;
			myElem.onmouseover = function()
			{
				for (var i=0; i<elem.length; i++){
					if (i==thisindex)
						elem[i].style.display = 'block';
					else
						elem[i].style.display = 'none';
				}
			}
		})();			// End of inner scope
	}
}
```

Permalänk: https://www.webforum.nu/p/2062155

## #3 — m_soderlund, 2007-12-20T08:57Z

Det här var ju nästan för bra för att vara sant. En fungerande lösning och dessutom en mycket god förklaring till lösningen.

Tackar så mycket! (y)

Berätta gärna också mer om skillnaden mellan null och undefined. :)

Permalänk: https://www.webforum.nu/p/2062246

## #4 — nitro2k01, 2007-12-20T12:29Z

Om du försöker komma åt en variabel som inte är definierad, så får du tillbaka **undefined**. Men **undefined** i sig är inte ett värde, utan tillståndet att ett variabelnamn är odefinierat i det nuvarande scopet. Normalt kastas det ett fel direkt när du försöker komma åt en odefinierad variabel. **alert(jagexisterarinte);** kommer t ex att stoppa skriptet. Lite annorlunda är det vad gäller arrayer. Om du försöker plocka ut något med ett index som inte existerar, så kommer du att få tillbaka en referens till ett faktiskt **undefined**\-objekt, som dock är lite speciellt och har typen undefined istället för object som andra objekt. Detta objekt kan kommas åt med kodordet **undefined**. Detta är inte något som sker bara för att **undefined** råkar vara odefinierat, utan det refererar faktiskt till ett speciellt objekt. **return undefined;** är dock aldrig att rekommendera.

**alert(\[\]\[0\]===undefined);**
Visar exempelvis true. Hängde du med? 
En tom array: **\[\]** 
Ett icke-existerande index i denna array: **\[\]\[0\]** 
Identisk jämförelse: **\===** 
Det speciella objektet: **undefined**
Det korrekta sättet att testa efter **undefined** är dock med:
**if ('undefined' == typeof variabel){ /\* Ajaj! \*/}**
När man kollar typen så fungerar det även med helt odefinierade variabler.

null däremot, är ett mer vanligt objekt, i det att man utan problem kan, och ibland bör, tilldela dess värde till saker. null står för att en objektreferens inte pekar nånstans. Exempelvis returneras null från DOM-funktioner som **document.getElementById()** när inget finns att returnera. 
Dock så kommer DOM-funktioner som returnerar en nod lista, exempelvis **document.getElementsByTagName()** fortfarande returnera en tom nodlista om inget hittas. Du behöver dock inte oroa dig för att en funktion som **document.getElementsByTagName()** ska slänga ett fel bara för att du tilldelar ett värde, typ **var taggar=document.getElementsByTagName("konstigtagg");** utan det sker isf först när man börjar pilla på elementen utan att kolla upp saker. (T ex genom att anta att det finns ett 0'te element utan kolla om det verkligen gör det)

Detta är dock ganska mycket överkurs, men det kan vara bra att att veta när man ska vänta sig **null** och när man ska vänta sig **undefined** för att öht göra en vettig kontroll.

Permalänk: https://www.webforum.nu/p/2062290

---

Tråden på webben: https://www.webforum.nu/amne/javascript/167399-mouseover-fungerar-på-en-länk-men-ej-på-andra