Antworten auf deine Fragen:
Neues Thema erstellen

JavaScript Hilfe

Waegi

Aktives Mitglied

Hallo,

ich bin zur Zeit dabei JavaScript zu lernen, arbeite dabei mit einem Tutorial von www.html-seminar.de und habe jetzt das Problem, dass ich immer folgenden Fehler von der Firebug-Konsole bekommen:

document.getElementsByTagName("h1").style is undefined

Hierzu noch das Script:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>JavaScript</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />


    <h1>JavaScript Kurs f&uuml;r Einsteiger</h1>
    <p>JavaScript lernen einfach gemacht ...</p>

    <script type="text/javascript">
        document.getElementsByTagName('h1').style.backgroundColor ='orange';
    </script>

</head>

<body>


</body>
</html>

Ich weß leider nicht wovon das kommt, hab shcon einiges probiert, am Anfang hatte ich HTML 5.0 drin, habs dann auf HTML 1.0 Transitional geändert, hat nichts gebracht. Ich hoffe mir kann jemand helfen.

mfg Waegi
 

Tr3icio

Nicht mehr ganz neu hier

AW: JavaScript Hilfe

1. im <head> Bereich darf es keine visuellen Tags geben. (Alles was der User sieht)
2. Empfehle ich dir UTF-8, ISO-8859-1 ist eigentlich schon längst veraltet
3. Nimm lieber HTML5 (nicht die standard Vorlage von Dreamweaver, etc.)
4. Es heißt nicht umsonst getElementsbyTagName. Du bekommst eine DOMNodeList zurück, welche du wie einen Array ansprichst.
5. Die HTML Version hat nichts mit Javascript zu tun

Richtig wäre:

HTML:
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8" />

        <title>JavaScript</title>
    </head>

    <body>
        <h1>JavaScript Kurs f&uuml;r Einsteiger</h1>
        <p>JavaScript lernen einfach gemacht ...</p>
    </body>

    <script>
        document.getElementsByTagName('h1')[0].style.backgroundColor = 'orange';
    </script>
</html>
 

Waegi

Aktives Mitglied

AW: JavaScript Hilfe

1. Was genau meinst du? Wenn du das mit den h1 und p Tags meinst, das hab ich schonmal davor dort oben drin gehabt, da hat alles funktioniert
2. Ja das hatte ich vorher drin, da hatte ich auch HTML 5 drin, hab ich ja geschrieben, hab es zum testen mal geändert
4. Das getElemtensbyTagName hab ich doch gemacht, das s ist bie mir da, meinst du dass ich dann noch dne Index angeben muss.
5. Versteh ich nicht ganz, was du da meinst?

Ok jetzt funktioniert es, danke. doch warum den Script-Teil unter den body-Bereich? Bisher hab ich das immer nur im Headbereich gesehen?

Mfg Waegi
 

sokie

Mod | Web

AW: JavaScript Hilfe

4, was die collection der 'h1' angeht musst du vielleicht noch einmal genauer hinlesen. es ging nicht um das 's' bei getElementsByTagName, sondern darum dass es darauf hinweist, dass eben nict nur ein element explizid ausgewählt wird sondern eine Sammlung von Nodes (die in diesem speziellen Fall nur ein element beinhaltet). Deshalb musst du aber trotzdem mit [0] das Element direkt auswählen um es zu formatieren.

Das script muss deshalb zumindest nach dem html des body notiert werden, damit es das Element H1 und P überhaupt schon gibt, wenn das script ausgeführt wird. im Head würde das script beide Elemente nicht finden können.
Es geht vielmehr um die beiden html Elemente h1 und p, die nicht im head notiert werden dürfen.
 
Zuletzt bearbeitet:

Waegi

Aktives Mitglied

AW: JavaScript Hilfe

Aja ok, vielen Dank für deine Antwort, habs jetzt voll verstanden, wie ihr das meint, haben die dann auf der Seite falsch erklärt, fällt sowieso auf, dass dort viele Rechtschreibefehler sind, werde mich mal nach anderen Tutorials umschauen, habt ihr dort Empfehlungen für Seiten mit Tutorials?

Mfg Waegi
 

Waegi

Aktives Mitglied

AW: JavaScript Hilfe

Mir kam das schon im Tutorial komisch vor, doch ich hab das einfach mal so geglaubt, doch wie wird das sonst gemacht, meist wird ja ein externes Script im head eingebunden, wie wird das dann gemacht, wenn ein Objekt aus dem body verwendet wird.

Meine Frage nach Tutorials bleibt weiterhin stehen, denn in dem Kurs wurde relativ wenig erklärt, wie ich finde.

Mfg Waegi
 

sokie

Mod | Web

AW: JavaScript Hilfe

...meist wird ja ein externes Script im head eingebunden, wie wird das dann gemacht, wenn ein Objekt aus dem body verwendet wird.
in vielen, wenn nicht in den meissten Fällen will man ja die elemente manipulieren, die im 'body' notiert sind. Daraus ergibt sich natürlich die notwendigkeit zu warten bis der body eben geladen ist, dieses ereignis ("body geladen") kann man im body tag abfangen zB <body onload="machwas"> wobei das "machwas" im scriptbereich im "head" beschreiben werden muss.

um aber die tags im body nicht mit programm zu füllen, sondern beides getrennt zu halten kann man seine programmierung im head so anlegen, dass sie erst ausgeführt wird, wenn zB. alles geladen ist:
Code:
<script type="text/javascript">
   window.onload = function(){
     document.getElementsByTagName('h1')[0].style.backgroundColor = 'orange';
   }

</script>
so ist sichergestellt, dass das h1 tag im body tatsächlich schon existiert, bevor man darangeht es zu selektieren und zu manipulieren.

hier gibt es im bereich Web Javascript einige Tutorials.
zum strukturieten Einstieg ist vielleicht ein Buch wie zB http://openbook.galileocomputing.de/javascript_ajax/ (kostenlos online lesen oder herunterladen) eine gute Sache.
 
Zuletzt bearbeitet:

Waegi

Aktives Mitglied

AW: JavaScript Hilfe

Hallo,

Danke für deine Antwort, ich werd mich dort mal umschauen, hatte zwar mal ein Buch von meinem Bruder, das war jedoch alles etwas abgehackt erklärt und so, das mit dem Scriptschnipsel versteh ich noch ned ganz wofür steht das window.onload? Fräg das das ganze ab, ich bin ein richtiger Neuling in dem Bereich.

Mfg Waegi
 

Tr3icio

Nicht mehr ganz neu hier

AW: JavaScript Hilfe

window.onload ist ein Event*.
Sobald die gesamte Seite mit allen Bildern geladen wurde, wird dieses aufgerufen. (Die Funktion wird ausgeführt).

Sollte man aber nur auf den DOM warten, reicht ein document.addEventListener("DOMContentLoaded", callback); völlig aus. (Oder ein readystatechange für ältere Browser)

*Falls du es noch nicht hattest: Events sind Ereignisse, z.B. ein Klick auf ein Element, welcher dann eine Funktion aufruft, die du vorher festgelegt hattest.
 

Waegi

Aktives Mitglied

AW: JavaScript Hilfe

Ok, dannn mal dankeschön, ich werde mir das Buch mal online ansehen ist ja möglich hier, und mich mal ducharbeiten. Vielen Dank für euere Tipps, wenn ich nochmal Fragen habe, melde ich mich einfach nochmal.

mfg Waegi
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben