Javascriptproblem; getElementById

PetterS · 2007-09-03, 13:56

Tja

Sitter och grejjer med javascript och har stött på ett simpelt problem som jag inte lyckas komma runt.

Såhär ser koden ut:

Kod:

<script>
function visa(var1, var2, var3, var4) {
document.getElementById(var1).style.display='block';
document.getElementById(var2).style.display='none';
document.getElementById(var3).style.display='none';
document.getElementById(var4).style.display='none';
}
</script>
<body>
 <a href="#" onClick="visa('nr1', 'nr2', 'nr3', 'nr4');"> #1 </A>
<div id=nr1>Text...</div>
<div id=nr2>Text...</div>
<div id=nr3>Text...</div>
<div id=nr4>Text...</div>

Detta script har jag i en meny, men blir förbaskat bökigt när man börjar komma upp i 10 alternativ. Jag vill istället göra så att jag endast laddar in den jag vill visa, och de andra döljs automatiskt. Borde ju funka med nått i stil med

Kod:

document.getElementById('nr1').style.display='none';
document.getElementById('nr2').style.display='none';
document.getElementById('nr3').style.display='none';
document.getElementById('nr4').style.display='none';

document.getElementById(var1).style.display='block';

Får det dock inte att fungera:/ känns som att man måste definiera variablerna först, men är för dålig på javascript för att lista ut hur

Tacksam för hjälp!

allstars · 2007-09-03, 15:26

med jquery kan detta fixas snabbt och lätt.

$(".hiddendiv").hide(); // för att gömma alla med klassen "hiddendiv"
$("div2').show(); // för att visa just div2

<div id="div1" class="hiddendiv">Text 1...</div>
<div id="div2" class="hiddendiv">Text 2...</div>
<div id="div3" class="hiddendiv">Text 3...</div>
<div id="div4" class="hiddendiv">Text 4...</div>
<div id="div5" class="hiddendiv">Text 5...</div>

kolla på jQuerys hemsida för dokumentation.

edit:
för att göra exemplet lite mer levande:
<script type="text/javascript">
$(function() {
$(".hiddendiv").hide(); // för att gömma alla med klassen "hiddendiv"

$("h3").click(function(){
$(".hiddendiv").hide();
$(this).next().show();
});
});
</script>

<h3 id="hdiv1">Div 1</h3>
<div id="div1" class="hiddendiv">Text 1...</div>

<h3 id="hdiv2">Div 2</h3>
<div id="div2" class="hiddendiv">Text 2...</div>

<h3 id="hdiv3">Div 3</h3>
<div id="div3" class="hiddendiv">Text 3...</div>

<h3 id="hdiv4">Div 4</h3>
<div id="div4" class="hiddendiv">Text 4...</div>

<h3 id="hdiv5">Div 5</h3>
<div id="div5" class="hiddendiv">Text 5...</div>

PetterS · 2007-09-03, 17:02

Tack så mycket! Ska bli kul att använda jquery :P

allstars · 2007-09-03, 21:00

Citat:

There's no eeeend to the possibilities....

martine · 2007-09-04, 13:05

Ingen som hört talas om DOM?? Att tynga ner sidan med så mycket repetitiv kod och dessutom med så många class:er och id:ar är ju egentligen inte alls nödvändigt…

Kod:

<div id="hiddendivs">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

med

Kod:

document.getElementById('hiddendivs').childNodes[];

och iterera igenom istället för att köra getElementById();

Det finns ju massa bra funktioner för att få tag på vad man behöver i dokumentstrukturen, get ElementByNames(), .firstChild, .lastChild, .nextSibling, .parentNode osv. Man kan navigera runt i dokumentstrukturen hur fint som helst utan att sätta id på allting!

Glöm inte: ditt html-dokument är ett objekt, inte en hög taggar!

Edit: Detta gäller förstås lika mycket för css

Kod:

div#hiddendivs>div {display: none}

matlin · 2007-09-12, 15:04

Citat:

Originally posted by martine@Sep 4 2007, 13:05
Ingen som hört talas om DOM?? Att tynga ner sidan med så mycket repetitiv kod och dessutom med så många class:er och id:ar är ju egentligen inte alls nödvändigt…

Kod:

<div id="hiddendivs"> <div>1</div> <div>2</div> <div>3</div> </div>

med

Kod:

document.getElementById('hiddendivs').childNodes[];

och iterera igenom istället för att köra getElementById();

Det finns ju massa bra funktioner för att få tag på vad man behöver i dokumentstrukturen, get ElementByNames(), .firstChild, .lastChild, .nextSibling, .parentNode osv. Man kan navigera runt i dokumentstrukturen hur fint som helst utan att sätta id på allting!

Glöm inte: ditt html-dokument är ett objekt, inte en hög taggar!

Edit: Detta gäller förstås lika mycket för css

Kod:

div#hiddendivs>div {display: none}

Kom ihåg att

Kod:

document.getElementById('hiddendivs').childNodes[];

även returnerar "white-space"-nodes...
Alltså, när du loopar igenom dom så kontrollera att

Kod:

element.nodeType==1

(eller Node.ELEMENT_NODE, fast jag har för mig att det inte fungerar i IE).
Annars får du krasch.

dotvoid · 2007-09-12, 17:19

Det räcker ju med använda språket... Om man gör väldigt få, små, grejer med javascript så behöver man knappast använda saker som jquery edy. (JQuery är bra i många fall) Dessutom bör man returnera false i nedanstående fall för att inte historyn i webbläsaren ska lägga onödiga grejer.

Kod:

<script>
function visa(list) {
 for (i in list) {
  document.getElementById(list[i]).style.display='block';
 }
 return false;
}
</script>

<body>
<a href="#" onClick="return visa(Array('nr1', 'nr2', 'nr3', 'nr4'));"> #1 </A>
<div style="display:none;" id=nr1>Text...</div>
<div style="display:none;" id=nr2>Text...</div>
<div style="display:none;" id=nr3>Text...</div>
<div style="display:none;" id=nr4>Text...</div>

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Javascriptproblem; getElementById