7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)
  • Q:
    Bijdrager
    Jack4ya

    Javscript: verbergen van div nav select

    Wat ik nu heb zijn 2 functies:

    1 om een tweede regel te tonen of te verbergen (dat werkt)
    2 om het blokje met id=graveerblok te tonen of te verbergen (dat werkt dus niet)
    Error: document.orderform.graveerblok has no properties

    Dan gat het dus om de ja/nee optie.

    Dat zal kloppen, maar ik ken helaas geen javascript, ik heb dit al aan elkaar zitten knopen.

    Hoe corrigeer ik dit in onderstaand voorbeeld?

    [code:1:46cda5ffa2]<html>
    <head>
    <script type=text/javascript>

    // functie om tweede graveerveld te tonen/verbergen
    function toggleSoort(chosen) {
    if (chosen == ‘huwelijk’)
    {
    document.orderform.graveerregel_2.style.visibility = ‘visible’;
    }
    else {
    document.orderform.graveerregel_2.style.visibility = ‘hidden’;
    document.orderform.graveerregel_2.value = ‘graveerregel 2’;
    }
    }

    // functie om het gehele graveerblok te tonen/verbergen
    function toggleBlok(chosen) {
    if (chosen == ‘ja’)
    {
    document.orderform.graveerblok.style.visibility = ‘visible’;

    } else {
    document.orderform.graveerblok.style.visibility = ‘hidden’;
    }
    }

    </script>
    </head>
    <body>
    <form name="orderform" action="javascript:return false">
    <table>
    <tr>
    <td><select name="soort" size="1" onChange="toggleSoort(document.orderform.soort.options[document.orderform.soort.selectedIndex].value);">
    <option>Kies gewenst soort</option>
    <option value="natuur">Natuur </option>
    <option value="chroom">Chroom </option>
    <option value="goud">Goud </option>
    <option value="huwelijk">Huwelijk </option>
    </select>
    </td>
    <td></td>
    </tr>
    <tr class="linedtd">
    <td valign="top"><strong>Graveren</strong>
    <select name="graveren" size="1" onChange="toggleBlok(document.orderform.graveren.options[document.orderform.graveren.selectedIndex].value);">
    <option value="ja" selected>ja</option>
    <option value="nee">nee</option>
    </select>
    </td>
    <td><div id="graveerblok" style="visibility:visible">
    <input type="text" name="graveerregel_1" value="graveerregel 1" size="20" maxlength="20" style="visibility:visible" /><br>
    <input type="text" name="graveerregel_2" value="graveerregel 2" size="20" maxlength="20" style="visibility:hidden" />
    </div>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    [/code:1:46cda5ffa2]

    Bijdrager
    iJoost

    Tja… Toch maar een beetje verdiepen in JavaScript dan. De document.orderform… syntax is oud. Dat doen we zo niet meer. Bovendien werkt het alleen voor de controls in een form en niet voor andere zaken zoals een div. Gebruik daarom altijd document.getElementById om toegang tot een element te krijgen op basis van het id.

    document.getElementById(‘graveerblok’).style.visibility=’…’;

    En vooral ook even goed onderscheid maken tussen name en id (name is wat er middels de form gePOST wordt of (geGET), id is wat je binnen de pagina zelf gebruikt en moet uniek zijn), dan kom je een heel eind.;-)

    Bijdrager
    Jack4ya
    ”iJoost”

    Tja… Toch maar een beetje verdiepen in JavaScript dan. De document.orderform… syntax is oud. Dat doen we zo niet meer. Bovendien werkt het alleen voor de controls in een form en niet voor andere zaken zoals een div. Gebruik daarom altijd document.getElementById om toegang tot een element te krijgen op basis van het id.

    document.getElementById(‘graveerblok’).style.visibility=’…’;

    En vooral ook even goed onderscheid maken tussen name en id (name is wat er middels de form gePOST wordt of (geGET), id is wat je binnen de pagina zelf gebruikt en moet uniek zijn), dan kom je een heel eind.;-)

    ik had inderdaad al document.getElementById(‘graveerblok’).style.visibility=’…’; geprobeerd, (leek me logisch omdát het een id was) maar geen succes helaas… Ik krijg dan geen foutmelding, maar werken doet het ook niet.

    Ik was me niet van bewust dat ik name en id door elkaar haalde. Ik weet namelijk wel het verschil. Misschien ergens over het hoofd gezien.:x

    Heb nu
    [code:1:da4579c927]<html>
    <head>
    <script type=text/javascript>

    // functie om tweede graveerveld te tonen/verbergen
    function toggleSoort(chosen) {
    if (chosen == ‘huwelijk’)
    {
    document.forms["orderform"].graveerregel_2.style.visibility = ‘visible’;
    document.forms["orderform"].graveerregel_2.style.visibility = ‘visible’;
    }
    else {
    document.forms["orderform"].graveerregel_2.style.visibility = ‘hidden’;
    document.forms["orderform"].graveerregel_2.value = ‘graveerregel 2’;
    }
    }

    // functie om het gehele graveerblok te tonen/verbergen
    function toggleBlok(chosen) {
    if (chosen == ‘ja’)
    {
    document.getElementById(’graveerblok’).style.visibility = ‘visible’;

    } else {
    document.getElementById(’graveerblok’).style.visibility = ‘hidden’;
    }
    }

    </script>
    </head>
    <body>
    <form action="javascript:return false" name="orderform" id="orderform">
    <table>
    <tr>
    <td><select name="soort" size="1" onChange="toggleSoort(document.orderform.soort.options[document.orderform.soort.selectedIndex].value);">
    <option>Kies gewenst soort</option>
    <option value="natuur">Natuur </option>

    <option value="chroom">Chroom </option>
    <option value="goud">Goud </option>
    <option value="huwelijk">Huwelijk </option>
    </select>
    </td>
    <td></td>
    </tr>

    <tr class="linedtd">
    <td valign="top"><strong>Graveren</strong>
    <select name="graveren" size="1" onChange="toggleBlok(document.orderform.graveren.options[document.orderform.graveren.selectedIndex].value);">
    <option value="ja" selected>ja</option>
    <option value="nee">nee</option>
    </select>
    </td>

    <td><div id="graveerblok" style="visibility:visible">
    <input type="text" name="graveerregel_1" value="graveerregel 1" size="20" maxlength="20" style="visibility:visible" /><br>
    <input type="text" name="graveerregel_2" value="graveerregel 2" size="20" maxlength="20" style="visibility:hidden" />
    </div>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>

    [/code:1:da4579c927]

    Bijdrager
    iJoost

    Als je geen foutmelding krijgt (in de Error Console van Firefox bijvoorbeeld) dan ligt het voor de hand dat je een waarde hebt toegekend aan een (nog) niet bestaande property van een object. Dat geeft nooit een fout. Hij maakt de property dan gewoon aan. Je zult moet debuggen, net als iedereen…;-) Gewoon alerts erin zetten en kijken wat de waarde van variabelen/objecten is op de diverse punten om te zien waar het anders gaat dan je had gedacht.

    En wat gebruik van name/id betreft. Sommige elementen die je aanspreekt hebben niet eens een id in de HTML. Gooi gewoon dat hele form-object (document.orderform) uit je JavaScript (zo deed je dat in IE4), gebruik overal document.getElementById en zet Error console open en dubuggen… je code in tweeen hakken totdat je exact weet wat er precies waar niet werkt.

    Bijdrager
    iJoost

    En ook geen document.forms! Flikker op…. met die zooi. ;-P

    Laat maar even weten als je gevonden hebt wat er precies niet werkt, dan wil ik wel vertellen waarom niet (als je enigzins redelijk JavaScript gebruikt tenminste (anders krijg je van mij alleen daar maar opmerkingen op)). Maar ik ga dus niet jouw code voor je schrijven en alles elke keer lezen is me ook al teveel. Zelf debuggen graag.

    Wat is de waarde van chosen als je binnenkomt?

    Bijdrager
    Jack4ya
    ”iJoost”

    En ook geen document.forms! Flikker op…. met die zooi. ;-P

    Laat maar even weten als je gevonden hebt wat er precies niet werkt, dan wil ik wel vertellen waarom niet (als je enigzins redelijk JavaScript gebruikt tenminste (anders krijg je van mij alleen daar maar opmerkingen op)). Maar ik ga dus niet jouw code voor je schrijven en alles elke keer lezen is me ook al teveel. Zelf debuggen graag.

    Okay, even goed bedankt. Je hebt ook volledig gelijk, hoor.

    Ik heb besloten om het op dit momem even uit handen te geven en er parallel morgen met een frisser hoofd naar te kijken.

    [size=9:0e807501e5]En nu niet denken dat ik onmiddelijk opgeef, maar ik wil/moet soms dingen doen, die ik helemaal niet bij mijn werk horen. Soms een nadeel dat ik als enige álles moet doen, terwijl ik grafisch vormgever ben en géén programmeur.

    Waarom voel ik toch altijd de behoefte om me te verdedigen als ik iets niet kan:? [/size:0e807501e5]

    Bijdrager
    iJoost

    OK;-)

7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.