[JS / DOM] template parameters

[Verwijderd]

Door op een knopje te drukken wil ik een stukje HTML laten zien. Nu gebruik ik op m'n site een template systeem, waar ik paramaters moet assingen naar de template om ze te kunnen gebruiken.

Bijvoorbeeld:

code:

    if(iets = iets)
        $melding1 = '<div class = "missie_stap_goed">Punt 1: Je bent minimaal Piciotto!</div>';
    else
        $melding1 = '<div class = "missie_stap_fout">Punt 1: Je bent minimaal Piciotto!</div>'; 

    $tpl->assign("missie3a.melding1", $melding1);

Op deze manier assign ik $melding1 naar missie3a.tpl, zodat ik als volgt de parameter kan gebruiken: {melding1}.

Nu wil ik dus als er op een knopje gedrukt wordt, de melding laten zien. Dat wil ik doen als volgt:

code:

    <script language='Javascript' type='text/javascript'>
        function ShowTips() {
            document.getElementById('Tips').innerHTML = "{melding1}<br />{melding2}<br />{melding3}<br />{melding4}<br />{melding5}";
        }

        function HideTips()
        {
            document.getElementById('Tips').innerHTML = "";
        }
    </script> 
<p id="Tips"></p>
<input type='button' onclick='ShowTips()' value='Show Tips' class='submit'>
<input type='button' onclick='HideTips()' value='Hide Tips' class='submit'>

Hiermee heb ik dus meerdere meldingen. Het probleem is alleen dat er met deze code niets gebeurd. Als ik het rijtje "{melding1}<br />{melding2}<br />{melding3}<br />{melding4}<br />{melding5}" vervang door gewone tekst, werkt het wel.

Mijn vraag is dus, hoe kan ik {melding#} gebruiken in die document.getElementByID... ?

[Bosmonster]

Zal wel komen doordat je iets geks in die string parset, zoals een regeleinde of quote. Hierdoor klopt je javascript niet meer.

Tip: Kijk in de source eens naar wat je eigenlijk genereert en bekijk hoe je dat probleem op kunt lossen. Een goede JS-debugger, zoals Firebug, kan je hierbij helpen.

[Verwijderd]

Ik heb het intussen deels werkend:

code:

    <script language='Javascript' type='text/javascript'>
        var Melding1 = {melding1};
        var Melding2 = {melding2};
        var Melding3 = {melding3};
        var Melding4 = {melding4};
        var Melding5 = {melding5};

        function ShowTips() {
            document.getElementById('Tips').innerHTML = Melding1+"<br />"+Melding2+"<br />"+Melding3+"<br />"+Melding4+"<br />"+Melding5;
        }

        function HideTips()
        {
            document.getElementById('Tips').innerHTML = "";
        }
    </script> 
<p id="Tips"></p>
<input type='button' onclick='ShowTips()' value='Show Tips' class='submit'>
<input type='button' onclick='HideTips()' value='Hide Tips' class='submit'>

Dat wordt als volgt ingevuld:

code:

<script language='Javascript' type='text/javascript'>
     var Melding1 = <div class = "missie_stap_goed">blabla</div>;
      var Melding2 = <div class = "missie_stap_goed">Punt 2: blabla</div>;
      var Melding3 = <div class = "missie_stap_goed">Punt 3: blabla!</div>;
      var Melding4 = <div class = "missie_stap_goed">Punt 4: blabla!</div>;
      var Melding5 = <div class = "missie_stap_fout">Punt 5: blabla!</div>;

Het punt is nu dat die div's niet goed werken. De opmaak daarvan, zoals die in de CSS staat gedefinieerd, werkt niet.

[ Voor 6% gewijzigd door Verwijderd op 13-08-2008 12:18 ]

[Bosmonster]

Je weet dat je strings van quotes voorzien moeten zijn? Je tweede stukje code klopt dus geen hout van.

Het gaat al een stuk beter als je bijvoorbeeld

JavaScript:

var Melding1 = '{melding1}';

doet...

[Verwijderd]

Dankje! Werkt prima nu

[ Voor 75% gewijzigd door Verwijderd op 13-08-2008 14:57 ]