Mit JavaScript text in div (id) schreiben ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aktiviert code
befehl
bereich
blocker
code
datei
dokument
eigenschaft
element
funktion
http
info
klar code
kleiner nachteil
machen
manipulieren
normalen browser
position
test
url
-
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:
im <div> ??<h1>Alles Klar !</h1>
was ist falsch ? ! ?
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
setze das script hinter das element, sonst kann es sein das es nicht gefunden wird, weils noch nicht da ist
-
oha ... ok ...
hcms schrieb:
setze das script hinter das element, sonst kann es sein das es nicht gefunden wird, weils noch nicht da ist
... 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
das ElementgetElementById
auch dann findet, wenn es "weiter unten" im Code steht ?! .... muss doch gehen ?! oO:)
-
stormproductions schrieb:
Das geht auch, allerdings muss das JS dann eine Funktion enthalten, die am Ende erst ausgeführt wird…
kann man nicht irgendwas machen, damit
das ElementgetElementById
auch dann findet, wenn es "weiter unten" im Code steht ?! .... muss doch gehen ?! oO:) -
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 -
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 zuwindow.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 ?!
-
stormproductions schrieb:
Ich bin mir nicht ganz sicher, inwiefern das z.Z. unterbunden wird, jedoch scheint das zu funzen:
und gibt es Alternative zuwindow.onLoad
... weil genau dieser JS-Befehl nicht gerne von PopUp-Blocker, Werbe-Blocker, etc.
gesehen wird und meist auch blockiert wird ...
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 -
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
