[JAVASCRIPT] body content laad niet! - Softwareontwikkeling

donderdag 13 november 2003 22:00

Acties:

superslim!

Topicstarter

Hallo,

Ik heb een javascript functie:

code:

<html>
    <head>
        <title> Quiz </title>
        <link rel="stylesheet" href="style.css" type="text/css">

        <script language="javascript" src="questions.js"></script>
        <script language="javascript">
        
            function _creatediv() {

                for (var i=1; i<8; i++) {
                            
                    document.writeln("<div id="+i+"> \n");
                    document.writeln(vraag[i][1]+"<br> \n");
                
                    for (var j=2; j<6; j++) {

                        document.writeln("<input type='radio' name='bla'> <br> \n");
                        
                    }   
                    
                    document.writeln("<br> \n\n");
                }
                
            }
            
        </script>
    </head>

    <body onload="_creatediv()">
    
    hallo!!!!! WAAR SLAAT DIT OP!???<input type="radio" onClick='alert("bla!")'>
    
    </body>
</html>

En die werkt verder goed

Maar, wat er tussen de body staat, wordt gewoon NIET gedisplayed.
Weet niet waar dit nu aan ligt!

In het bestand questions.js staat een array met daarin 10 items die ook een aray maken.

code:

var vraag = new Array();

    vraag[1] = new Array();

        vraag[1][1] = 'vraag1';
        vraag[1][2] = 'a1';
        vraag[1][3] = 'a2';
        vraag[1][4] = 'a3';
        vraag[1][5] = 'a4';
        vraag[1][6] = 'answer';

    vraag[2] = new Array();

        vraag[2][1] = 'vraag2';
        vraag[2][2] = '2';

Etc. Etc.

Kent iemand dit nare probleem?

mijn naam slaat nergens op, althans niet op mij :P

donderdag 13 november 2003 22:03

Acties:

Verwijderd

document.write() werkt niet meer als het document in zijn geheel geladen is. Je moet dan dus het Document Object Model (DOM) gebruiken om nog iets toe te voegen.

Of je kunt nog iets aan document.body.innerHTML plakken.

De simpelste oplossing is trouwens om gewoon dat tweede stukje script in de body te plakken. Die functie declratie kan dan weg, en ook het onload attribuut mag dan verdwijnen.

[ Voor 29% gewijzigd door Verwijderd op 13-11-2003 22:05 ]

donderdag 13 november 2003 22:05

Acties:

crisp

Devver

Pixelated

als je document.write gebruikt nadat je document al geparsed is, dan overschrijf je je hele document weer

ergo: je moet je functie niet onload aanroepen, maar gewoon in de body ergens zodat het tijdens het parsen wordt uitgevoerd.

ps, javascript hoort in Webdesign & Graphics

Intentionally left blank

donderdag 13 november 2003 22:05

Acties:

justmental

my heart, the beat

Je sluit je div tag niet af zo te zien.

Who is John Galt?

donderdag 13 november 2003 22:05

Acties:

Amras

Komt door de document.writeln die je gebruikt, een oplossing is om een div te gebruiken en daarin de resultaten dmv de innerText (of innerHTML) te zetten. Verder hoort javascript in W&G...

EDIT: Zucht... wat is iedereen snel hier...

[ Voor 13% gewijzigd door Amras op 13-11-2003 22:07 . Reden: Zucht.. ]

donderdag 13 november 2003 22:07

Acties:

crisp

Devver

Pixelated

justmental schreef op 13 november 2003 @ 22:05:
Je sluit je div tag niet af zo te zien.

hij sluit 'm 7 keer niet af

Intentionally left blank

donderdag 13 november 2003 22:08

Acties:

Zoolander

superslim!

Topicstarter

Dank voor de DIV fout.
Dus als ik het in de body zet, heb ik hier geen problemen mee?
Of begrijp ik nu goed dat zodra ik document.writeln of write gebruik dat alle andere opmaak pleite is?

Hmm, ga eens even proberen! Laat het nog even weten, thanx zo far.
En zal hem next time in goede topic gooien....

mijn naam slaat nergens op, althans niet op mij :P

donderdag 13 november 2003 22:12

Acties:

Zoolander

superslim!

Topicstarter

code:

<html>
    <head>
        <title> Quiz </title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script language="javascript" src="questions.js"></script>
    </head>

    <body>
        <script language="javascript">
        
                for (var i=1; i<8; i++) {
                            
                    document.writeln("<div id="+i+"> \n");
                    document.writeln(vraag[i][1]+"<br> \n");
                
                    for (var j=2; j<6; j++) {

                        document.writeln("<input type='radio' name='bla'> <br> \n");
                        
                    }   
                    
                    document.writeln("</div><br> \n\n");
                }
            
        </script>
    </body>
</html>

Haha, inderdaad. Nu kan ik er zowel voor als achter dingen plaatsen.

Toch apart, dat zodra ik hem onload doe, body= weg.
En in de body gaat het prima.
Hehe, dat heet zeker browserkunde.

mijn naam slaat nergens op, althans niet op mij :P

donderdag 13 november 2003 22:18

Acties:

Dennis

crisp schreef op 13 november 2003 @ 22:05:
ps, javascript hoort in Webdesign & Graphics

Verplaats hem dan

donderdag 13 november 2003 22:21

Acties:

crisp

Devver

Pixelated

ddc schreef op 13 november 2003 @ 22:18:
[...]

Verplaats hem dan .

ik heb hier geen modrechten...

Intentionally left blank

donderdag 13 november 2003 22:33

Acties:

Janoz

Moderator Devschuur®

!litemod

Ikke wel

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

maandag 1 december 2003 21:39

Acties:

Zoolander

superslim!

Topicstarter

Hallo,

Heb mijn code aangepast.
En heb het via DOM willen doen. Maar nu werkt het niet, want de nextSibling wordt niet weergegeven. Die blijft hidden (staat in CSS dat die class hidden is)
Als ik gewoon in HTML een DIV erna plak, dan werkt het wel en wordt die DIV mooi visible. Heeft dit met bovenstaand te maken en hoe kan ik dit oplossen?

DANK DANK DANK

code:

<html>
    <head>
        <title> Quiz </title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script language="javascript" src="questions.js"></script>
        <script language="javascript">
                    
            var seconds = 100;
                    
            function _wait() {

                document.getElementById('timer').value = seconds;

                if(seconds <= 0) {
                    document.getElementById('timer').value = 0;
                    alert(" tijd is op boodschap ");
                } else {
                    timerId = setTimeout("_wait()",1000);
                    document.getElementById('sound').src = "sound.wav";
                    seconds = seconds -1;               
                }

            }

            function _verify(input) {
                
                if(input == true) {
                    input.parentNode.style.visibility="hidden";

                    if (input.parentNode.nextSibling.ClassName == "question") {
                        input.parentNode.nextSibling.style.visibility="visible";
                    } else {
                        clearTimeout(timerId);
                        alert("bla!");
                    }
                        
                } else {
                    seconds = seconds - 10;
                    input.style.visibilty="hidden";
                }

            }

        </script>
    </head>     
    
    <body onload="_wait()">

        <h3 id="seconds"><form>Resterende tijd: <input type='text' id="timer" size='2'></form></h3>
        <bgsound id=sound>
        
        <script language="javascript">
                        
            for (i=0; i<vraag.length; i++) {
                
                document.write("<div class=question>");
                document.write("<div><h3>"+vraag[i]['q']+"</h3></div> <br>");


                for (j=0; j<vraag[j].length; j++) {
                    
                    if(vraag[i][j] == vraag[i]['a']) {
                        document.write("<div class=choice value=true onClick=_verify(this)>" +vraag[i][j]+ "</div> <br>");
                    } else {
                        document.write("<div class=choice value=false onClick=_verify(this)>" +vraag[i][j]+ "</div> <br>");
                    }
                    
                }   
                                
                document.write("<div class=image>[img]images\\"+i+".gif></div>");
                document.write("</div>");
            }

            document.getElementById("seconds").nextSibling.style.visibility="hidden";
    
        </script>
                
    </body>
</html[/img]

mijn naam slaat nergens op, althans niet op mij :P

maandag 1 december 2003 21:53

Acties:

crisp

Devver

Pixelated

waarom vraag je alles via siblings op? Dat moet mi toch wel eenvoudiger kunnen zonder dat je afhankelijk wordt van je document structuur.
Verder snap ik uit je verhaal niet precies wat je probleem nu is, wat wordt er precies niet weergegeven maar zou wel weergegeven moeten worden?

Nog wat dingetjes:
-input elementen hoeven niet persé in een form te staan
-wat doen die value attributen in je divs?
-waarom gebruik je images\ ipv images/ ?
-waarom die div om je h3 tag?
-ClassName moet className zijn
-waarom ueberhaupt een input voor je timer? Je kan ook gewoon een textNode aanpassen hoor

Intentionally left blank

maandag 1 december 2003 22:02

Acties:

Zoolander

superslim!

Topicstarter

- Heb die input weggehaald.
- Die value attiributen zijn om via DOM en die siblings de vraag te beoordelen.
- Anders kon ik geen variable i aanroepen. Heeft niks met het path te maken.
- De H3 tag heeft te maken dat ze tussen de DIV met class question erbij hoort.
- verbeterd
- die snap ik niet... maar is makkelijk omdat die dan bovenin staat.

Maar de eerste layer in het DOM model van de 7 zou weergegeven moeten worden. En dat doet ie niet. (layers die ik met die forlus maak) Als ik in HTML die code zou invoeren in het document dan werkt het wel. Maar dus niet als ik het via een JS loop doe.

En dat wilde ik nou net zo graag

PS. Ik probeer mezelf DOM te leren, daarom via DOM

[ Voor 11% gewijzigd door Zoolander op 01-12-2003 22:08 ]

mijn naam slaat nergens op, althans niet op mij :P

maandag 1 december 2003 22:10

Acties:

crisp

Devver

Pixelated

nou ja, ik blijf het wazig vinden allemaal...

iig nog iets:

code:

1	if(input == true)

moet dat refereren aan de value die je in je div opgeeft? In feite ben je custom attributen aan het maken dan aangezien officieel een div geen value attribute heeft. Als je het dan toch via de DOM wilt doen (en je moet wel wil je het werkend krijgen in bv Opera of Mozilla), dan zou je input.getAttribute('value') moeten gebruiken

heb je een voorbeeldje van questions.js? Misschien dat ik het dan beter begrijp.

[ Voor 10% gewijzigd door crisp op 01-12-2003 22:12 ]

Intentionally left blank

maandag 1 december 2003 22:13

Acties:

Zoolander

superslim!

Topicstarter

haha, als JIJ het al wazig vind is er bijna geen hoop meer.
MY GOD! Hoe weten sommige mensen dit allemaal? Ik dacht dat W3 schools de beste tutorials heeft, maar dit leer je er niet..... tip?

Maar jij snapt het probleem niet of zie je geen oplossing?

mijn naam slaat nergens op, althans niet op mij :P

maandag 1 december 2003 22:22

Acties:

crisp

Devver

Pixelated

Zoolander schreef op 01 december 2003 @ 22:13:
haha, als JIJ het al wazig vind is er bijna geen hoop meer.
MY GOD! Hoe weten sommige mensen dit allemaal? Ik dacht dat W3 schools de beste tutorials heeft, maar dit leer je er niet..... tip?

Maar jij snapt het probleem niet of zie je geen oplossing?

Ik snap het probleem niet helemaal nee, dus als je misschien een voorbeeldje van questions.js hebt kan ik het misschien lokaal even uitproberen, mogelijk dat ik het dan wel snap.
Ik heb wel een beetje een idee waar je naartoe wilt, en weet ook zeker dat dat wel netjes op te lossen is hoor

Oh ja, hoe ik al die dingen weet - in ieder geval niet van middelmatige tutorials zoals op w3schools

Gewoon een goed boek kopen met de saaie theorie en references lezen zoals die op DevEdge

[ Voor 14% gewijzigd door crisp op 01-12-2003 22:25 ]

Intentionally left blank

maandag 1 december 2003 22:29

Acties:

Zoolander

superslim!

Topicstarter

Komt ie:

Questions.js (wel een beetje raar, maarja, fakeshit mag dat zijn

code:

vraag = new Array();

    vraag[0] = new Array();

        vraag[0][0] = 'Nee, dit mag alleen de vader van Nijntje als hij daar zin in heeft.';
        vraag[0][1] = 'Ja, het is waarschijnlijk de eigen schuld van dat hondje.';
        vraag[0][2] = 'Ja, hondjes mogen ten alle tijden door konijnen opgehangen worden.';
        vraag[0][3] = 'Nee, dit mag niet omdat het hondje de kar moet trekken.';
        vraag[0]['q'] = 'Vraag1: Nijntje wil zijn hondje afmaken omdat hij daar zin in heeft. Mag dat?';
        vraag[0]['a'] = vraag[0][0];


    vraag[1] = new Array();

        vraag[1][0] = 'Nee, dit is geen goed voorbeeld van de ouders van Nijntje.';
        vraag[1][1] = 'Ja, maar Nijntje levert meer op als prostituee.';
        vraag[1][2] = 'Ja, het verkopen van je kind is een legitieme en zinvolle bezigheid.';
        vraag[1][3] = 'Nee, Nijntje voldoet niet aan de ECC9001 standaard voor getekende konijnen.';
        vraag[1]['q'] = 'Vraag 2: Nijntje wordt verkocht op de markt omdat zijn ouders geld nodig hebben. Mag dat?';
        vraag[1]['a'] = vraag[1][1];


    vraag[2] = new Array();

        vraag[2]['q'] = 'Vraag 3: Nijntje krijgt geen zakgeld omdat zijn vader blut is. Nijntje wil daarom zelfmoord plegen. Is dat een goed plan?';
        vraag[2]['a'] = vraag[2][1];
        vraag[2][0] = 'Ja, dat zal zijn ouders leren en dan is hij zielig en het is hun schuld MUHAHAHA!';
        vraag[2][1] = 'Bluf! Doe dan!';
        vraag[2][2] = 'Ja, maar dan goed met veel bloed en geluid!';
        vraag[2][3] = 'Nee, dit is geen gezonde situatie. Ook niet voor een konijn met homoseksuele gevoelens.';
        

    vraag[3] = new Array();

        vraag[3][0] = 'Omdat het eten niet smaakte wat moeder konijn had gemaakt.';
        vraag[3][1] = 'Elke aanleiding is er een!';
        vraag[3][2] = 'Ongehoorzaamheid moet gepast beloond worden.';
        vraag[3][3] = 'Omdat vader konijn seksueel gefrustreerd is en hij toch stoom moet afblazen.';
        vraag[3]['q']= 'Vraag 4: Als Nijntje te laat thuis komt, wil zijn vader hem eens hard in elkaar slaan. Waarom?';
        vraag[3]['a'] = vraag[3][0];
        

    vraag[4] = new Array();

        vraag[4][0] = 'Ja, die persoon heeft het zeker weten verdient. Waarom anders krijgt hij klappen? ';
        vraag[4][1] = 'Ja, het slachtoffer meende dat 12klappen een slechte sound is.';
        vraag[4][2] = 'Nee, Nijntje had mee moeten helpen om het karwei sneller af te maken.';
        vraag[4][3] = 'Nee, Nijntje had de konijnenpolitie moeten bellen 0900-wortel.';
        vraag[4]['q'] = 'Vraag 5: Nijntje ziet dat iemand klappen krijgt. Stiekem geniet hij hiervan en doet daarom niks. Is dat goed gehandeld?';
        vraag[4]['a'] = vraag[4][0];
        

    vraag[5] = new Array();

        vraag[5][0] = 'Het potlood schiet dwars door Dicks hersenen heen, en hij is dood. Nu krijgt Nijntje nooit mee nieuwe kleren.';
        vraag[5][1] = 'Dick begrijpt de hint en tekend Nijntje voortaan met extra dure Nigga kleding.';
        vraag[5][2] = 'Dick gomt Nijntje zijn kleren uit en tekend hem met enkel een Ajax sjaal in een steegje in Rotterdam.';
        vraag[5][3] = 'Dick zijn powerlevel stijgt en doet een tackleaanval. Nijntje ontwijkt, maar valt in een Lavaput die er ineens scheen te zijn.';
        vraag[5]['q'] = 'Vraag 6: De tekenaar Dick wil Nijntje voortaan zonder merkkleding tekenen. Nijntje duwd daarom een potlood in Dicks oog. Wat gebeurde er?';
        vraag[5]['a'] = vraag[5][2];

    vraag[6] = new Array();

        vraag[6][0] = 'Je antwoord braaf ja en ondergaat de lijfstraf voor jou bedoeld.';
        vraag[6][1] = 'Je loopt naar hem toe en drukt een gum tegen zijn hoofd en dreigt met het uitgummen van zijn hoofd.';
        vraag[6][2] = 'Je rent weg als een gek, dont fuck with Nijntje.';
        vraag[6][3] = 'Je hoopt dat dit de laatste vraag van deze uiterst irritante quiz is.';
        vraag[6]['q'] = 'Vraag 7: Jij komt Nijntje tegen op straat en hij zegt: Hee, hufter, moet je klappen. Wat moet je doen?';
        vraag[6]['a'] = vraag[6][3];

En ook mijn CSS:

code:

body {
    
    background-color: #FF3333;
    font-style: verdana;
    font-weight: bold;
    
}

h3 {

    font-family: verdana;
    font-weight: bold;

}

.question {

    position : absolute;
    left : 50px;
    top : 100px;
    visibility : hidden;
}

.choice {

    cursor: pointer;
    padding: 2 px;
}

.image {

    position : absolute;
    left : 50px;
    top : 250px;
    visibility : visible;

Hopelijk kom JIJ er wel uit. Begrijp nog niet zo heel veel van dat DOM.... Devwattes? trouwens...

mijn naam slaat nergens op, althans niet op mij :P

maandag 1 december 2003 22:31

Acties:

crisp

Devver

Pixelated

DevEdge

Nijntje roels trouwens!

Intentionally left blank

maandag 1 december 2003 22:36

Acties:

Zoolander

superslim!

Topicstarter

INDEED! that was waarom ik dit maar ff als topic nam. De plaatjes die erbij horen kan ik je wel ff mailen? Heb ze ff bewerkt, simpel maar wel geinig.

Gelukkig maar, dacht dat je dit TE zou vinden ofzo....

mijn naam slaat nergens op, althans niet op mij :P

maandag 1 december 2003 22:45

Acties:

Zoolander

superslim!

Topicstarter

Yo, dat ene van input.value werkte wel! Nu begint hij te leven..... THANX MAN! maar ben er nog niet helemaal.... die layers flippen nog een beetje.
Ga ook ff DevEdge checken zo...

mijn naam slaat nergens op, althans niet op mij :P

maandag 1 december 2003 22:58

Acties:

crisp

Devver

Pixelated

Ik denk dat je zoiets wilt hebben:

HTML:

<html>
    <head>
        <title> Quiz </title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script language="javascript" src="questions.js"></script>
        <script language="javascript">
                    
            var seconds = 100;
                    
            function _wait() {

                document.getElementById('timer').value = seconds;

                if(seconds <= 0) {
                    document.getElementById('timer').value = 0;
                    alert(' tijd is op boodschap ');
                } else {
                    timerId = setTimeout('_wait()',1000);
                    document.getElementById('sound').src = 'sound.wav';
                    seconds = seconds -1;                
                }

            }

            function _verify(input) {
                
                if(input.getAttribute('value') == 'true') {
                    input.parentNode.style.visibility='hidden';

                    if (input.parentNode.nextSibling && input.parentNode.nextSibling.className == 'question') {
                        input.parentNode.nextSibling.style.visibility='visible';
                    } else {
                        clearTimeout(timerId);
                        alert('bla!');
                    }
                        
                } else {
                    seconds = seconds - 10;
                    input.style.visibility='hidden';
                }

            }

        </script>
    </head>        
    
    <body onload="_wait()">

        <h3 id="seconds">Resterende tijd: <input type="text" id="timer" size="2" /></h3>
        <bgsound id="sound">
        
        <script type="text/javascript">
                        
            for (var i=0; i<vraag.length; i++) {
                
                if (i==0) document.write('<div class="question" style="visibility:visible">');
                else document.write('<div class="question">');
                document.write('<h3>'+vraag[i]['q']+'</h3><br />');


                for (j=0; j<vraag[j].length; j++) {
                    
                    if(vraag[i][j] == vraag[i]['a']) {
                        document.write('<div class="choice" value="true" onclick="_verify(this)">' +vraag[i][j]+ '</div><br />');
                    } else {
                        document.write('<div class="choice" value="false" onclick="_verify(this)">' +vraag[i][j]+ '</div><br />');
                    }
                    
                }    
                                
                document.write('<img src="images/'+i+'.gif" alt="" />');
                document.write('</div>');
            }
    
        </script>
                
    </body>
</html>

Ik heb dus even voor de 1e div een afvraging gemaakt waarbij ik expliciet de visibility overrule. Tevens heb ik de div om de image weggehaald omdat door de position: absolute je 'm weer uit de container haalde eigenlijk.
Verder nog wat meer kleine dingetjes (en ik hou van single quotes in JS

), en ook bij vraag 3 heb ik even de ['q'] en ['a'] entries onder de antwoorden gezet.
Ik denk dat je zo wel weer verder komt

Intentionally left blank

maandag 1 december 2003 23:19

Acties:

Zoolander

superslim!

Topicstarter

code:

1 2	if (input.parentNode.nextSibling && input.parentNode.nextSibling.className == 'question') { input.parentNode.nextSibling.style.visibility="visible";

Deze regel snap ik alleen niet, wat doe je daar?

Thanx works great!

mijn naam slaat nergens op, althans niet op mij :P

maandag 1 december 2003 23:21

Acties:

crisp

Devver

Pixelated

Zoolander schreef op 01 december 2003 @ 23:19:
[...]
Deze regel snap ik alleen niet, wat doe je daar?

Thanx works great!

Bij de laatste vraag kreeg je een foutmelding omdat er geen nextSibling meer bestond; vandaar dat ik eerst afvraag of er ueberhaupt wel een nextSibling is

Intentionally left blank

Pagina: 1

Reageer