[JS] window.onload werkt niet

[Carharttguy]

Dag iedereen

Ik heb een probleem met de window.onload event. Die werkt niet. Hij fired gewoon niet. Ik heb onderstaande code: (deze pagina wordt geïnclude door andere pagina)

code:

<script>
    var afbeeldingen;
    var huidigeafbeelding = 0;
    
    window.onload = function() {
        document.getElementById("afbeelding").src = afbeeldingen[0];
        alert("test");
    } 
</script>
<div id="contentlinks">
    <form action="?pag=instrumentupdaten" method="POST" class="bootstrap-frm">
        <?php
            $itemid = $mysqli->real_escape_string($_GET['id']);
            $_SESSION['itemid'] = $itemid;
            $resultaat = $mysqli->query("SELECT * FROM item_veld_waarde LEFT JOIN veld ON item_veld_waarde.veldid=veld.id WHERE item_veld_waarde.itemid = ".$itemid." ORDER BY veld.volgorde");
        
            while($rij = $resultaat->fetch_assoc()){
                echo "<label for='".$rij['id']."'>".$rij['naam']."</label>";
                if($rij['vastewaarden'] == 0){
                    echo "<input type='text' name='".$rij['id']."'value='".$rij['waarde']."'><br />";
                }else{
                    $vastewaardes = $mysqli->query("SELECT id, waarde FROM vastewaarden LEFT JOIN veld_vastewaarden ON vastewaarden.id=veld_vastewaarden.veldid WHERE veld_vastewaarden.veldid=".$rij['id']);
                    echo "<select name='".$rij['id']."'>";
                        while ($vastewaarde = $vastewaardes->fetch_assoc()){
                            echo "<option value='".$vastewaarde['id']."'>".$vastewaarde['waarde']."</option>";
                        }
                    echo "</select><br />";
                }
            }
        ?>
        <input class="button" type="submit" value="Update">
    </form>
</div>
<div id="contentrechts">
    <?php
        foreach (glob("afbeeldingen/items/".$itemid."/*.*") as $filename) {
            echo "<script>afbeeldingen.push('".$filename."')</script>";
        }
    ?>
    
    <div id="instrumentafbeelding">
        <img id="afbeelding" src="" class="Image" />
    </div>
</div>
<div id="clearfloat"></div>

(ik weet dat mijn html/php niet best-practice is, maar dat is aan ondergeschikt belang)
Ik heb al geprobeerd om de <img id="afbeelding"> weg te halen omdat ik dacht hij de pagina niet loadde omdat er geen src attribuut is ingesteld, maar dat veranderd niets aan de zaak. In de Firefox ontwikkelaarshulpmiddelen geeft de javascript console geen fout. Bij mijn HTML zie ik echter wel een klein ballonnetje staan met daarin de onload functie. Ziehier:

[krvabo]

Is er een andere window.onload ergens anders die hem wellicht overschrijft?

Kun je de alert eens voor de .src-code zetten om te kijken of hij dan wel triggert?

Wat is de waarde van 'afbeeldingen' als de onload triggert?
Wordt hij wel gevuld, maar niet weergegeven (verkeerde bestandslocatie?)

Als je het al zo wil doen, probeer dan dit eens:

PHP:

<div id="contentrechts">

    <?php
        $filenames = glob("afbeeldingen/items/".$itemid."/*.*");

        if (!empty($filenames)) {
           echo '<script type="text/javascript">var afbeeldingen = [ "'. implode('","', $filenames) .'" ]</script>';
        }
    ?></script>
</div>

[Merethil]

Carharttguy schreef op vrijdag 27 februari 2015 @ 10:53:
Dag iedereen

Ik heb een probleem met de window.onload event. Die werkt niet. Hij fired gewoon niet. Ik heb onderstaande code: (deze pagina wordt geïnclude door andere pagina)

code:

<script>
    var afbeeldingen;
    var huidigeafbeelding = 0;
    
    window.onload = function() {
        document.getElementById("afbeelding").src = afbeeldingen[0];
        alert("test");
    } 
</script>
<div id="contentlinks">
    <form action="?pag=instrumentupdaten" method="POST" class="bootstrap-frm">
        <?php
            $itemid = $mysqli->real_escape_string($_GET['id']);
            $_SESSION['itemid'] = $itemid;
            $resultaat = $mysqli->query("SELECT * FROM item_veld_waarde LEFT JOIN veld ON item_veld_waarde.veldid=veld.id WHERE item_veld_waarde.itemid = ".$itemid." ORDER BY veld.volgorde");
        
            while($rij = $resultaat->fetch_assoc()){
                echo "<label for='".$rij['id']."'>".$rij['naam']."</label>";
                if($rij['vastewaarden'] == 0){
                    echo "<input type='text' name='".$rij['id']."'value='".$rij['waarde']."'><br />";
                }else{
                    $vastewaardes = $mysqli->query("SELECT id, waarde FROM vastewaarden LEFT JOIN veld_vastewaarden ON vastewaarden.id=veld_vastewaarden.veldid WHERE veld_vastewaarden.veldid=".$rij['id']);
                    echo "<select name='".$rij['id']."'>";
                        while ($vastewaarde = $vastewaardes->fetch_assoc()){
                            echo "<option value='".$vastewaarde['id']."'>".$vastewaarde['waarde']."</option>";
                        }
                    echo "</select><br />";
                }
            }
        ?>
        <input class="button" type="submit" value="Update">
    </form>
</div>
<div id="contentrechts">
    <?php
        foreach (glob("afbeeldingen/items/".$itemid."/*.*") as $filename) {
            echo "<script>afbeeldingen.push('".$filename."')</script>";
        }
    ?>
    
    <div id="instrumentafbeelding">
        <img id="afbeelding" src="" class="Image" />
    </div>
</div>
<div id="clearfloat"></div>

(ik weet dat mijn html/php niet best-practice is, maar dat is aan ondergeschikt belang)
Ik heb al geprobeerd om de <img id="afbeelding"> weg te halen omdat ik dacht hij de pagina niet loadde omdat er geen src attribuut is ingesteld, maar dat veranderd niets aan de zaak. In de Firefox ontwikkelaarshulpmiddelen geeft de javascript console geen fout. Bij mijn HTML zie ik echter wel een klein ballonnetje staan met daarin de onload functie. Ziehier:
[afbeelding]

Zit er wel wat in je var afbeeldingen? Zet anders de alert eens voor je toewijzing aan .src op je afbeelding element?

[BasieP]

Om te beginnen moet je leren debuggen.

Je denkt nu dat je onload niet werkt, en ik zie wel een alert staan om dat te controleren, maar als de regel erboven mis gaat gaat die alert ook niet af.

Verder kan je ook boven de window.onload een 'debugger' statement zetten
Je kan dan, voordat je de functie toewijst checken of de onload wellicht al geset is door een ander stuk code.

(een ctrl-f doet ook wonderen)

[NMe]

krvabo schreef op vrijdag 27 februari 2015 @ 11:40:
Als je het al zo wil doen, probeer dan dit eens:

Of beter, nog, json_encode. Is meteen ook alles wat escaped moet worden fatsoenlijk escaped.

[Carharttguy]

Excuses voor het late antwoord, ik werk niet alle dagen aan deze site.

Ik heb nu debug.write gebruikt ipv alert. De onload ging dus wel af, maar het setten van de variable "afbeeldingen" ging niet.

Het probleem was dat mijn path niet klopte, er stond een spatie in mijn pad.
Nu heb ik dit probleem opgelost en genereert mijn pagina deze html:

code:

<!DOCTYPE html>
<html>
<head>
    <link type='text/css' rel='stylesheet' href='css/algemeen.css'>
<link type='text/css' rel='stylesheet' href='css/content.css'>
<link type='text/css' rel='stylesheet' href='css/formstyle.css'>
<link type='text/css' rel='stylesheet' href='css/tablestyle.css'>
    <title>Personeelssite</title>
</head>
<body>
    <div id='logotitel'>
        <div id='logo'>
            <img src='afbeeldingen/logoscb.png'>
        </div>
        <div id='titelbalk'>
            <h1>Personeelswebsite <font color='#A53121'>Conservatorium</font></h1>
            <p>
                Welkom, (naam) (voornaam) <br />
                [Uitloggen]
            </p>
                    </div>
    </div>
    
    <div id='navigatiecontent'>
        <div id='navigatie'>
            <ul>
    <li>Nieuws</li>
    <li>Afwezigheden</li>
    <li><a href="?pag=inventarisinstrumenten">Inventaris Instrumenten</a></li>
</ul>         </div>
        <div id='content'>
            <script>
    var afbeeldingen;
    var huidigeafbeelding = 0;
    
    window.onload = function() {
        document.getElementById("afbeelding").src = afbeeldingen[huidigeafbeelding];
    } 
</script>
<div id="contentlinks">
    <form action="?pag=instrumentupdaten" method="POST" class="bootstrap-frm">
        <label for='1'>Merk</label><select name='1'><option value='1'>Herrmann</option><option value='1'>Herrmann</option><option value='1'>Herrmann</option><option value='1'>Herrmann</option><option value='1'>Herrmann</option><option value='1'>Herrmann</option><option value='1'>Herrmann</option><option value='1'>Herrmann</option><option value='1'>Herrmann</option><option value='1'>Herrmann</option><option value='1'>Herrmann</option></select><br /><label for='2'>Type</label><input type='text' name='2'value='Testtype'><br /><label for='3'>Locatie</label><input type='text' name='3'value='C4'><br /><label for='4'>Serienummer</label><input type='text' name='4'value='888'><br />        <input class="button" type="submit" value="Update">
    </form>
</div>
<div id="contentrechts">
    <script>afbeeldingen.push('afbeeldingen/items/3/Schermafbeelding 2015-01-23 om 09.27.21.png')</script>    <button class="button" id="vorige" onclick="vorigeAfbeelding();">Vorige</button>
    <button class="button" id="volgende" onclick="volgendeAfbeelding();">Volgende</button>
    <button class="button" id="verwijderen" onclick="verwijderAfbeelding();">Volgende</button>
    
    <div id="instrumentafbeelding">
        <img id="afbeelding" src="" class="Image" />
    </div>
</div>
<div id="clearfloat"></div>        </div>
    </div>
</body>
</html>

Maar nu geeft mijn console de volgende fout:

TypeError: afbeeldingen is undefined

Dat is raar, aangezien mijn variable wel degelijk aangemaakt wordt. Is er een manier om te zien welke variablen zijn aangemaakt en zo?

@NMe: Waarom json_encode en niet urlencode bijvoorbeeld?

Dank

[krvabo]

Omdat json_encode precies daarvoor gemaakt is, om data door te geven. Urlencode encodeert een url, en dat is niet wat je aan het doen bent. Plus het feit dat javascript's decoder niet hetzelfde is als die van php.

Met betrekking tot je andere vraag:
Wederom debuggen.
Ik ben zo gek geweest om het op te lossen, maar dit zijn dingen die je prima zelf kunt debuggen en onderzoeken wat er mis is. Indien het niet lukt dan zou een meer compacte testcase gewaardeerd worden. Hier is de oplossing: http://jsfiddle.net/32t1bsyr/
Je doet een array push op een undefined ("null") variabele. Zeggen dat var 'afbeeldingen' een array is fixt het.

HTML:

<body>
    
        <div id='content'>
            <script>
    var afbeeldingen = [];
    var huidigeafbeelding = 0;
             
    
    window.onload = function() {

        document.getElementById("afbeelding").src = afbeeldingen[huidigeafbeelding];
       
    } 
</script>

<div id="contentrechts">
    <script>afbeeldingen.push('https://www.google.com/images/srpr/logo11w.png')</script>
    <div id="instrumentafbeelding">
        <img id="afbeelding" src="" class="Image" />
    </div>
</div>
<div id="clearfloat"></div>

[Carharttguy]

Dankjewel voor de tip om strict aan te geven dat de variable een array is.

Maar de achterliggende reden snap ik eigenlijk nog altijd niet zo goed, ik vond overal dat JavaScript dynamically typed zou zijn. Dan ging ik er van uit dat er in runtime uitgemaakt wordt dat "afbeeldingen" een array is.

Ik zie waarschijnlijk iets over het hoofd, ik heb weinig ervaring met JavaScript of eigenlijk met dynamically typed talen in het algemeen.

[vistu]

Dat klopt dus niet , .push is een function in Array.prototype; die is dus alleen beschikbaar op een object 'type' Array (zie ook https://developer.mozilla...l_Objects/Array/prototype). Nu riep je een function aan op een undefined object, die bevat geen push.

[krvabo]

Dat kan inderdaad verwarrend zijn als je dat nog niet doorhebt.
Javascript heeft de volgende typen: undefined, null, string, boolean, number, object
Een array is in beginsel een object in javascript.

In de voorbeelden van array.push() op verschillende pagina's zie je ook altijd dat push() wordt gebruikt op een al gedefinieerde array (met waardes er in), of dat er eerst var afbeeldingen = new Array(); wordt gedaan. [] is een shortcut daarvoor.

Om te debuggen kun je gebruikmaken van de developer console in je browser (Druk F12 op je pagina), en dan bij het DOM-tabblad staan je variabelen (en heel veel andere dingen). Dit overigens naast alle debug tools in je ontwikkelomgeving e.a.

[ Voor 23% gewijzigd door krvabo op 03-03-2015 17:19 ]