kostenloser Webspace werbefrei: lima-city


Mit JavaScript text in div (id) schreiben ?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    stormproductions

    stormproductions hat kostenlosen Webspace.

    Hallo

    warum funktioniert folgender Code nicht ????

    <html>
    <head>
    <title>Test-Seite</title>
    
    <script type="text/javascript">
    var mytext = 'Alles Klar !'; 
    document.getElementById('info').innerHTML = '<h1>' + mytext + '</h1>';
    </script>
    
    </head>
    <body>
    
    <p>TEST</p>
    <div id="info"></div>
    <p>***</p>
    
    </body>
    </html>


    Bei der Ausgabe fehlt das gewünschte:
    <h1>Alles Klar !</h1>
    im <div> ??

    was ist falsch ? ! ?
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. h**s

    setze das script hinter das element, sonst kann es sein das es nicht gefunden wird, weils noch nicht da ist :wink:
  4. Autor dieses Themas

    stormproductions

    stormproductions hat kostenlosen Webspace.

    oha ... ok ...
    hcms schrieb:
    setze das script hinter das element, sonst kann es sein das es nicht gefunden wird, weils noch nicht da ist :wink:

    ... dann geht's ???

    aber ich dachte javascript sollte möglichst in den <head> Bereich rein ???

    auch weil ich später den JavaScript-Code nicht direkt in der .html Datei haben will,
    sondern einbinden mit src= .... und das (denke ich) macht man ja immer im <head> Bereich ?!


    Datei: test.js
    var mytext = 'Alles Klar !';
    document.getElementById('info').innerHTML = '<h1>' + mytext + '</h1>';


    und dann innerhalb des <head> Bereich:
    <script type="text/javascript" src="test.js"></script>


    und dann ... irgendwo im <bod<> Bereich
    <div id="info"></div>


    kann man nicht irgendwas machen, damit
    getElementById
    das Element
    auch dann findet, wenn es "weiter unten" im Code steht ?! .... muss doch gehen ?! oO:)

  5. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    stormproductions schrieb:
    kann man nicht irgendwas machen, damit
    getElementById
    das Element
    auch dann findet, wenn es "weiter unten" im Code steht ?! .... muss doch gehen ?! oO:)
    Das geht auch, allerdings muss das JS dann eine Funktion enthalten, die am Ende erst ausgeführt wird…
  6. schreibe das Ganze als funktion in deine JavaScript datei

    dann kannst du mit <body onLoad="function"> die funktion ausführen.

    Auch wenn der Name etwas anderes vermuten lässt, sollte das Script erst nach dem laden ausgeführt werden.
    sprich: dein div ist auch schon da ;)

    kleiner nachteil: es startet auch erst, wenn wirklich alles (auch Bilder) geladen sind
  7. Autor dieses Themas

    stormproductions

    stormproductions hat kostenlosen Webspace.

    Hallo, Danke

    kann ich nicht auch innerhalb der .js Datei die Funktion aufrufen,
    mit der Bedingung dass das Dokument "ready" also ferig geladen ist ?

    Datei: test.js
    function schreibe_text() { 
    var mytext = 'Alles Klar !';
    document.getElementById('info').innerHTML = '<h1>' + mytext + '</h1>';
    }
    
    window.onLoad = schreibe_text();


    und gibt es Alternative zu
    window.onLoad

    ... weil genau dieser JS-Befehl nicht gerne von PopUp-Blocker, Werbe-Blocker, etc.
    gesehen wird und meist auch blockiert wird ...

    also sowas wie bei jQuery ... $(document).ready(function(){ .... });
    nur halt ohne jQuery o.a. ... also einfach direkt mit (reinem) JS .... z.B.:

    if (document.readyState === "complete") { .... }

    oder ähnlich ... wenn das geht ....
    ... naja ... aber auch sowas könnte durch von PopUp-Blocker, Werbe-Blocker, etc. geblockt werden ?!
  8. m******e

    stormproductions schrieb:
    und gibt es Alternative zu
    window.onLoad

    ... weil genau dieser JS-Befehl nicht gerne von PopUp-Blocker, Werbe-Blocker, etc.
    gesehen wird und meist auch blockiert wird ...
    Ich bin mir nicht ganz sicher, inwiefern das z.Z. unterbunden wird, jedoch scheint das zu funzen:

    HTML
    <html>
    <head>
    <title>Test-Seite</title>
    <script src="test.js" language="javascript"></script>
    
    </head>
    <body>
    
    <p>TEST</p>
    <div id="info"><noscript>JavaScript nicht aktiviert? ;)</noscript></div>
    <p>***</p>
    
    </body>
    </html>

    JavaScript
    function addLoadEvent(func){
    var oldonload = window.onload;if(typeof window.onload != 'function'){
    window.onload=func;}else{window.onload=function(){oldonload();func();
    }}}
    addLoadEvent(function() {
    var mytext = 'Alles Klar !';
    document.getElementById('info').innerHTML = '<h1>' + mytext + '</h1>';
    });

    Beispiel ^^

    Weitere Möglichkeiten

    Vielleicht ist es ja was für Dich.



    Beitrag zuletzt geändert: 22.2.2013 2:39:16 von menschle
  9. g****e

    menschle schrieb:
    function addLoadEvent(func){
    var oldonload = window.onload;if(typeof window.onload != 'function'){
    window.onload=func;}else{window.onload=function(){oldonload();func();
    }}}
    addLoadEvent(function() {
    var mytext = 'Alles Klar !';
    document.getElementById('info').innerHTML = '<h1>' + mytext + '</h1>';
    });


    Des ganze trara und drundrum ist garnicht nötig, zumindest wenn man nicht auf eigenschaftsbasierten Events, sondern auf dem guten alten addEventListener setzt:
    window.addEventListener("load", function(){ alert("hallo"); });
    window.addEventListener("load", function(){ alert("hello"); });
    window.addEventListener("load", function(){ alert("hola"); });

    Diese Funktionen werden in einem normalen Browser alle drei ausgeführt, weil man mittels addEventListener beliebig viele Funktionen auf ein Event mapen kann. Das onload Event, welches als Eigenschaft gegeben ist, wird trotzdem ausgeführt.

    Ein Tipp von mir ist, dass du deinen kompletten Code erst mit dem load Event startest. Auch solche Manipulationen. Dann ist die Position egal, wie hier schon erwähnt wurde. Es hat außerdem den vorteil, dass wirklich schon alles da ist. Wenn du beispielsweise CSS manipulieren willst, müsstest du ja auch erst sicherstellen, dass die Stylesheets geladen sind (wenn du die Stylesheets manipulieren willst), so ist es immer sichergestellt.

    Liebe Grüße

    Beitrag zuletzt geändert: 22.2.2013 9:40:02 von ggamee
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!