JS foutje? :S

**Eddy B.** · 26-02-2010, 15:35

Hallo ik gebruik het volgende om een div te laten zien/verblinden, wat is er fout? Bij option doet ie het gewoon normaal, het is toch gewoon onclick? Onchange lijkt me sterk.

<option onclick="javascript:toggle(1);toggle2(0)">

**Simok** · 26-02-2010, 15:50

Als je het mij vraagt: de functie toggle bestaat niet!
Die zul je dus óf moeten maken óf je gebruikt de javascript code: document.getElementById('id_van_de_div').visibilit y= 'hidden';

Advies:
- Zoek op jQuery (download, zie documentatie -> 1 regel plakken in de header).
- Dan kun je doen $('#id_van_de_div').toggle();

jQuery kan iets bevoorbeeld ook 'hiden' met een effect, zoals fadeOut(); etc.

**Eddy B.** · 26-02-2010, 16:04

Natuurlijk, het gaat dan ook om:

//begin
function toggle(status){
idStatus = status;
element = document.getElementById('div1');
if(idStatus==0){
element.style.display='none';
} else {
element.style.display='block';
}
}
function toggle2(status){
idStatus = status;
element = document.getElementById('div2');
if(idStatus==0){
element.style.display='none';
} else {
element.style.display='block';
}
}
//end

maar ik zie de fout niet in het script..

**Raymond Nijland** · 26-02-2010, 16:05

Net even in elkaar gezet

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
</head>
<script type="text/javascript">
    window.onload = function(){
        var index = document.getElementById('show').selectedIndex;
        if(index == 0){
            document.getElementById('divje').style.visibility = 'visible';
            document.getElementById('divje').style.display = 'block';
        }
        if(index == 1){
            document.getElementById('divje').style.visibility = 'hidden';
            document.getElementById('divje').style.display = 'none';
        }

    }
    
    function toggle(index){
        if(index == 0){
            document.getElementById('divje').style.visibility = 'visible';
            document.getElementById('divje').style.display = 'block';
        }
        if(index == 1){
            document.getElementById('divje').style.visibility = 'hidden';
            document.getElementById('divje').style.display = 'none';
        }
    }
</script>
<body>
    <select id="show" onchange="toggle(this.selectedIndex);">
        <option selected="selected">Zichtbaar</option>
        <option>Onzichtbaar</option>
    </select>
    
    <div id="divje">divje</div>
</body>
</html>

**Eddy B.** · 26-02-2010, 16:12

Raymond, dat is inderdaad erg duidelijk maar het betreffen meerdere options. Daarom werkt dat helaas niet.

**Ruud van der Velden** · 26-02-2010, 16:35

In je functie parameter staat 'status' maar je gebruikt verder 'idStatus'

Misschien is dat het?

Laat maar, zie al dat je 'm weer aan idstatus toekent.

**Simok** · 26-02-2010, 16:54

bij mij werkt dit gewoon...
gebruik je firebug? zie je daar ook niet gewoon verschijnen "display: none"?

verder geen errors daar?

ik ga bijna twijfelen aan de html

Origineel gepost door Eddy B.

Natuurlijk, het gaat dan ook om:

//begin
function toggle(status){
idStatus = status;
element = document.getElementById('div1');
if(idStatus==0){
element.style.display='none';
} else {
element.style.display='block';
}
}
function toggle2(status){
idStatus = status;
element = document.getElementById('div2');
if(idStatus==0){
element.style.display='none';
} else {
element.style.display='block';
}
}
//end

maar ik zie de fout niet in het script..

**Eddy B.** · 26-02-2010, 17:18

PHP Code:


<script>

//begin

function toggle(status){

idStatus = status;

element = document.getElementById('div1');

if(idStatus==0){

element.style.display='none';

} else {

element.style.display='block';

}

}

function toggle2(status){

idStatus = status;

element = document.getElementById('div2');

if(idStatus==0){

element.style.display='none';

} else {

element.style.display='block';

}

}

//end

</script>



        <select name="type_reis">

          <option disabled="disabled" checked="checked">Maak een keuze</option>

          <option onclick="javascript:toggle(1);toggle2(0);">Enkel reis van Maarssen naar Schiphol € 50,-</option>

          <option onclick="javascript:toggle(1);toggle2(0);">Enkel reis van Schiphol naar Maarssen € 50,-</option>

          <option onclick="javascript:toggle2(1);toggle(0);">Retour reis van Maarssen / Schiphol en van Schiphol / Maarssen € 100,-</option>

        </select>



Dat is het, ik zie geen fout, maar chrome geeft niks weer, ziet iemand iets raars ofzo? Ik vind het erg vreemd.

Aanvullend bericht:
Oke, ik heb ontdekt dat hij het in FF wel doet, maar niet in andere browsers, iemand een idee wat ik daaraan kan doen?
Aanvullend bericht:
Ik gebruik dit script vaker en dit heb ik nog nooit meegemaakt

**Raymond Nijland** · 26-02-2010, 18:17

Moment ik weet wat je wil en mijn script werkte trouwens ook met meerdere opties maar niet met meerdere divs.

Na wat aanpassingen denk ik dat je onderstaande code wilt hebben.

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
</head>
<script type="text/javascript">
    window.onload = function(){
        index = document.getElementById('show').selectedIndex;
        
        if(index == 0){
            toggle('div1', 0);
            toggle('div2', 0);
        }
        
        if(index == 1){
            toggle('div1', 1);
            toggle('div2', 0);
        }
        
        if(index == 2){
            toggle('div1', 1);
            toggle('div2', 0);
        }
        
        if(index == 3){
            toggle('div1', 0);
            toggle('div2', 1);
        }        
    }
    
    function toggle(element, show){
        if(show){
            document.getElementById(element).style.visibility = 'visible';
            document.getElementById(element).style.display = 'block';
        }
        if(!show){
            document.getElementById(element).style.visibility = 'hidden';
            document.getElementById(element).style.display = 'none';
        }
    }
</script>
<body>
    <select id="show">
        <option onclick="toggle('div1', 0); toggle('div2', 0);" selected="selected">Maak een keuze</option>
        <option onclick="toggle('div1', 1); toggle('div2', 0);">Enkel reis van Maarssen naar Schiphol € 50,-</option>
        <option onclick="toggle('div1', 1); toggle('div2', 0);">Enkel reis van Schiphol naar Maarssen € 50,-</option>
        <option onclick="toggle('div1', 0); toggle('div2', 1);">Retour reis van Maarssen / Schiphol en van Schiphol / Maarssen € 100,</option>
    </select>
        
    <div id="div1">div 1</div>
    
    <div id="div2">div 2</div>
</body>
</html>

**Dannyvw** · 26-02-2010, 18:34

var idStatus = status; ipv idStatus = status;

**Ruud van der Velden** · 26-02-2010, 20:12

Totdat iemand met zijn toetsenbord de selectie verandert....

Origineel gepost door Raymond Nijland

Moment ik weet wat je wil en mijn script werkte trouwens ook met meerdere opties maar niet met meerdere divs.

Na wat aanpassingen denk ik dat je onderstaande code wilt hebben.

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
</head>
<script type="text/javascript">
    window.onload = function(){
        index = document.getElementById('show').selectedIndex;
        
        if(index == 0){
            toggle('div1', 0);
            toggle('div2', 0);
        }
        
        if(index == 1){
            toggle('div1', 1);
            toggle('div2', 0);
        }
        
        if(index == 2){
            toggle('div1', 1);
            toggle('div2', 0);
        }
        
        if(index == 3){
            toggle('div1', 0);
            toggle('div2', 1);
        }        
    }
    
    function toggle(element, show){
        if(show){
            document.getElementById(element).style.visibility = 'visible';
            document.getElementById(element).style.display = 'block';
        }
        if(!show){
            document.getElementById(element).style.visibility = 'hidden';
            document.getElementById(element).style.display = 'none';
        }
    }
</script>
<body>
    <select id="show">
        <option onclick="toggle('div1', 0); toggle('div2', 0);" selected="selected">Maak een keuze</option>
        <option onclick="toggle('div1', 1); toggle('div2', 0);">Enkel reis van Maarssen naar Schiphol € 50,-</option>
        <option onclick="toggle('div1', 1); toggle('div2', 0);">Enkel reis van Schiphol naar Maarssen € 50,-</option>
        <option onclick="toggle('div1', 0); toggle('div2', 1);">Retour reis van Maarssen / Schiphol en van Schiphol / Maarssen € 100,</option>
    </select>
        
    <div id="div1">div 1</div>
    
    <div id="div2">div 2</div>
</body>
</html>

**Raymond Nijland** · 27-02-2010, 11:06

Origineel gepost door Ruud van der Velden

Totdat iemand met zijn toetsenbord de selectie verandert....

Klopt...

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS</title>
</head>
<script type="text/javascript">
    window.onload = function(){
        index = document.getElementById('show').selectedIndex;
        showChanged(index);
    }
    
    function showChanged(index){        
        if(index == 0){
            toggle('div1', 0);
            toggle('div2', 0);
        }
        
        if(index == 1){
            toggle('div1', 1);
            toggle('div2', 0);
        }
        
        if(index == 2){
            toggle('div1', 1);
            toggle('div2', 0);
        }
        
        if(index == 3){
            toggle('div1', 0);
            toggle('div2', 1);
        }    
    }
    
    function toggle(element, show){
        if(show){
            document.getElementById(element).style.visibility = 'visible';
            document.getElementById(element).style.display = 'block';
        }
        if(!show){
            document.getElementById(element).style.visibility = 'hidden';
            document.getElementById(element).style.display = 'none';
        }
    }
</script>
<body>
    <select id="show" onChange="showChanged(this.selectedIndex)" onBlur="showChanged(this.selectedIndex)">
        <option selected="selected">Maak een keuze</option>
        <option>Enkel reis van Maarssen naar Schiphol € 50,-</option>
        <option>Enkel reis van Schiphol naar Maarssen € 50,-</option>
        <option>Retour reis van Maarssen / Schiphol en van Schiphol / Maarssen € 100,</option>
    </select>
        
    <div id="div1">div 1</div>
    
    <div id="div2">div 2</div>
</body>
</html>

Merk op dat je eerst een enter moet geven zodat de onChange event uitgevoert wordt, vandaar ook een unblur (focus verliezen) die uitgevoerd wordt wanneer je ergens anders opklikt.

**Simok** · 27-02-2010, 12:34

Nogmaals; waarom gebruik je jQuery niet? :)

**Eddy B.** · 28-02-2010, 21:36

Dit is al opgelost hoor, ik heb het vervangen met radiobuttons, dat werkte een stuk netter.

Iedereen bedankt.

JS foutje? :S

JS foutje? :S

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

JS foutje? :S

JS foutje? :S

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Inloggen