[javascript] help met item() functie - Softwareontwikkeling

dinsdag 19 april 2005 08:41

Acties:

Verwijderd

Topicstarter

ik ben bezig met een script om alle divs met dezelfde NAME te (un)hiden door middel van bijvoorbeeld een knop.

ik ben nu al een heel eind op weg maar helaas werkt het NIET in internet explorer.

ik denk dat het te maken heeft met de ITEM() functie.

reageert deze anders in internet explorer?
Is dit de verhelpen?
Alternatieve functie?

alvast bedankt

JavaScript:

<html>
<head>
<script>
    function hideshow(naam){

    elements = document.getElementsByName(naam);

    var stop = 0;
    for(teller=0;stop!=1;teller++){

         if(elements.item(teller)){

             if(elements.item(teller).style.display != "none"){elements.item(teller).style.display = "none"}
                else{elements.item(teller).style.display = "block"}

        }else{stop = 1;}
    }

    }
</script>

<style>
div.box{
background:black;
width:100px;
height:100px;
color:white;
margin:10px;
padding:5px;
text-align:center;
display:block;
}
</style>


</head>


<body>

<table>
<tr>
<td valign="top">
<input type="button" value="Hide alpha" onclick="hideshow('alpha')"></button>

<DIV class="box" name="alpha">
alpha box 1
</DIV>

<DIV class="box" name="alpha">
alpha box 2
</DIV>

<DIV class="box" name="alpha">
alpha box 3
</DIV>

<DIV class="box" name="alpha">
alpha box 4
</DIV>
</td>

<td valign="top">
<input type="button" value="Hide beta" onclick="hideshow('beta')"></button>

<DIV class="box" name="beta">
beta box 1
</DIV>

<DIV class="box" name="beta">
beta box 2
</DIV>

<DIV class="box" name="beta">
beta box 3
</DIV>

<DIV class="box" name="beta">
beta box 4
</DIV>
</td>

<td valign="top">
<input type="button" value="Hide gamma" onclick="hideshow('gamma')"></button>

<DIV class="box" name="gamma">
gamma box 1
</DIV>

<DIV class="box" name="gamma">
gamma box 2
</DIV>

<DIV class="box" name="gamma">
gamma box 3
</DIV>

<DIV class="box" name="gamma">
beta box 4
</DIV>
</td>
</tr>
</table>
</body>
</html>

dinsdag 19 april 2005 08:49

Acties:

RSchellhorn

getElement(s)By(..) geeft direct een array terug, met elementen[teller] kan je dus je individuele elementen benaderen.

Een Enumerator werkt vaak met een item() functie, maar dat is hier niet het geval.

"Ik heb zo veel soep gegeten, dat kan een mens niet aan. Ik heb zo veel soep gegeten, kan bijna niet meer staan. Ik zat daar maar te slurpen achter die grote kop en als ik bijna klaar was, dan schepten ze weer op!" (Hans Teeuwen)

dinsdag 19 april 2005 09:01

Acties:

Janoz

Moderator Devschuur®

!litemod

Javascript hoort in Webdesign & Graphics ipv Programming & Webscripting.

moved.

Ken Thompson's famous line from V6 UNIX is equaly applicable to this post:
'You are not expected to understand this'

dinsdag 19 april 2005 09:11

Acties:

crisp

Devver

Pixelated

Slayer08 schreef op dinsdag 19 april 2005 @ 08:49:
getElement(s)By(..) geeft direct een array terug, met elementen[teller] kan je dus je individuele elementen benaderen.

Een Enumerator werkt vaak met een item() functie, maar dat is hier niet het geval.

Nee, DOM methods geven een collection terug waar je wel degelijk met een enumerator doorheen kan lopen. Je kan het ook als een soort array benaderen (is in IE ook sneller), maar dat hoeft niet.

Het probleem zit 'm hier denk ik in het feit dat een div-element officieel geen name-property heeft; IE weigert gewoon om de elementen te herkennen aan de name. Ik denk dat je dus een workaround zal moeten verzinnen.

Doe maar eens een alert(elements.length) - die geeft in IE altijd 0 terug.

[ Voor 6% gewijzigd door crisp op 19-04-2005 09:12 ]

Intentionally left blank

dinsdag 19 april 2005 09:41

Acties:

RSchellhorn

crisp schreef op dinsdag 19 april 2005 @ 09:11:
[...]
Doe maar eens een alert(elements.length) - die geeft in IE altijd 0 terug.

*ript stukje werkende code uit z'n codebase, ook in IE.

JavaScript:

var o = this.getElementsByTagName('ul');
if(o.length > 0) {
    o[0].style.display = "block";
}

Vraag ik me af waarom dit werkt ???

[ Voor 5% gewijzigd door RSchellhorn op 19-04-2005 09:42 . Reden: Of bedoelt Crisp echt de getElementsByName ..., maar die bestaat toch ook niet ? ]

"Ik heb zo veel soep gegeten, dat kan een mens niet aan. Ik heb zo veel soep gegeten, kan bijna niet meer staan. Ik zat daar maar te slurpen achter die grote kop en als ik bijna klaar was, dan schepten ze weer op!" (Hans Teeuwen)

dinsdag 19 april 2005 09:44

Acties:

BtM909

Watch out Guys...

Slayer08 schreef op dinsdag 19 april 2005 @ 09:41:
[...]

*ript stukje werkende code uit z'n codebase, ook in IE.
JavaScript:
1
2
3
4
var o = this.getElementsByTagName('ul');
if(o.length > 0) {
    o[0].style.display = "block";
}
Vraag ik me af waarom dit werkt ???

Misschien even goed de zin lezen van crisp

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 19 april 2005 09:49

Acties:

RSchellhorn

BtM909 schreef op dinsdag 19 april 2005 @ 09:44:
[...]

Misschien even goed de zin lezen van crisp

Ja wil hem wel alert'en, maar dan nog geeft ie echt 1 terug

Maar het zou dus mis gaan door de getElementsByName(), dus wellicht als de TS omschrijft met een getElementByID() of getElementsByTagName() zal het wel werken...

[ Voor 1% gewijzigd door RSchellhorn op 19-04-2005 09:54 . Reden: Maar hij wilde nu juist dmv de name, dus heeft ie niet veel aan :P ]

"Ik heb zo veel soep gegeten, dat kan een mens niet aan. Ik heb zo veel soep gegeten, kan bijna niet meer staan. Ik zat daar maar te slurpen achter die grote kop en als ik bijna klaar was, dan schepten ze weer op!" (Hans Teeuwen)

dinsdag 19 april 2005 09:57

Acties:

BtM909

Watch out Guys...

Slayer08 schreef op dinsdag 19 april 2005 @ 09:49:
[...]

Ja wil hem wel alert'en, maar dan nog geeft ie echt 1 terug
Maar het zou dus mis gaan door de getElementsByName(), dus wellicht als de TS omschrijft met een getElementByID() of getElementsByTagName() zal het wel werken...

Misschien begreep je mijn subtiele

hint niet helemaal, maar crisp doelt op het retourneren van 0 indien je name gebruikt icm een div

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 19 april 2005 10:08

Acties:

RSchellhorn

BtM909 schreef op dinsdag 19 april 2005 @ 09:57:
[...]

Misschien begreep je mijn subtiele hint niet helemaal, maar crisp doelt op het retourneren van 0 indien je name gebruikt icm een div

Jaja, moet je wel ff m'n hele bericht lezen heej

Maar misschien kan de TS vertellen waarom hij persee op name wil, komt de code uit een form ofzo? Want anders is het werken met id's of bepaalde tags uit een container mooier ?

Ik zie wel een paar buttons, maar neem aan dat je je alpha, beta en gamma's wil bewerken?

[ Voor 10% gewijzigd door RSchellhorn op 19-04-2005 10:09 ]

"Ik heb zo veel soep gegeten, dat kan een mens niet aan. Ik heb zo veel soep gegeten, kan bijna niet meer staan. Ik zat daar maar te slurpen achter die grote kop en als ik bijna klaar was, dan schepten ze weer op!" (Hans Teeuwen)

dinsdag 19 april 2005 10:11

Acties:

crisp

Devver

Pixelated

An sich is het gewoon een bug, of een halfslachtige implementatie van getElementsByName in IE - maar dat zijn we ondertussen wel gewend. Zoiets zou wel moeten werken:

JavaScript:

function hideshow(naam)
{
  var el = document.getElementsByTagName('div'), i = el.length;
  while (i--)
  {
    if (el.item(i).getAttribute('name') == naam)
    {
      el.style.display = el.style.display == 'none' ? 'block' : 'none';
    }
  }
}

hoewel je het wel even moet testen in Opera; die kan nog wel eens een issue hebben als je bestaande property-namen gebruikt voor elementen die officieel die property niet hebben.

[ Voor 18% gewijzigd door crisp op 19-04-2005 10:12 ]

Intentionally left blank

dinsdag 19 april 2005 11:14

Acties:

Verwijderd

Topicstarter

crisp's oplossing did the trick. met een kleine aanpassing :

code:

1	el.style.display = el.style.display == 'none' ? 'block' : 'none';

verandert naar:

code:

1	el.item(i).style.display = el.item(i).style.display == 'none' ? 'block' : 'none';

Heel erg bedankt voor de hulp.

dinsdag 19 april 2005 13:20

Acties:

crisp

Devver

Pixelated

Het was ook even uit het blote hoofd

Intentionally left blank

dinsdag 19 april 2005 15:01

Acties:

Amras

Nu heb je wel een oplossing voor je probleem gevonden met een soort work-around, maar waarom zo moeilijk doen? Waarom niet een container div om die 4 boxes die je (on)zichtbaar kunt maken? Zoiets dus:

HTML:

<input type="button" value="Hide alpha" onclick="hideshow('alpha')"/>
<div id="alpha">
  <div class="box">alpha box 1</div>
  <div class="box">alpha box 2</div>
  <div class="box">alpha box 3</div>
  <div class="box">alpha box 4</div>
</div>

De hideshow functie is dan simpelweg:

JavaScript:

function hideshow(id)
{
    var container = document.getElementById(id);
    container.style.display = (container.style.display == "block") ? "none" : "block";
}

Lijkt me veel eenvoudiger toch? Of zeg ik iets geks?