• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] JavaScript in HTML einbinden

Paul_Johann

Neues Mitglied
Hallo
Das mit dem Einbinden von meiner JavaScript Datei hat soweit ganz gut geklappt, aber jetzt weiß ich nicht, wie ich die Funktion im BODY aufrufen soll.
Die .html Datei lautet folgender Maßen:
HTML:
<!DOCTYPE    html>
<html>
    <head>
        <title>Musterseite</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <meta charset="utf-8" />
        <script type="text/javascript" src="java.js"></script>
    </head>
    <body>

    </body>
Und in meiner .js Datei steht:
Javascript:
<script src="[URL]http://code.jquery.com/jquery-1.10.2.min.js[/URL]"></script>
        <script type="text/javascript">
            $(document).ready(function() {
            $('.menubutton').click(function() {
            $('nav').slideToggle('slow');});});
        </script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script>
              $(document).ready(function (){
              $(window).scroll(function (){
              if ($(this).scrollTop() > 100){
                      $('.scrollup').fadeIn();}
            else {    $('.scrollup').fadeOut();}});
                      $('.scrollup').click(function () {
                      $("html, body").animate({scrollTop: 0}, 600);
              return false;});});
        </script>
Mit einer kleinen Funktion um die Uhrzeit anzuzeigen, hab ich gewusst, wie ich sie im BODY aufrufe. Nämlich einfach mit:
HTML:
<script type="text/javascript" language="JavaScript>
<!--
zeit();
//-->
</script>
aber das war ja auch nicht schweer, weil die .js Datei folgendermaßen lautet:
Javascript:
function zeit() {
uhrzeit = new Date();
document.write(uhrzeit.getHours() + " Uhr " + uhrzeit.getMinutes() + " Minuten" ); }

Ich habe das Scipt auch schon direkt in meine .html Datei geschrieben, und das hat dann auch funktioniert, allerdings hat die Seite immer ewig zum Laden gebraucht.

Ich danke im Vorraus :D
mfg. Paul
 
Werbung:
Die Funktion wird automatisch ausgeführt, nachdem die Seite geladen ist.

Aber meine Funktion wird auch nach längerem Warten nicht ausgeführt.
Kann es vielleicht sein, dass ich irgendwo einen Fehler drinn hab
Oder meinst du, die Funktion kann so überhaupt gehen?
Müsste sie ja eigendlich schun, da es ja klappt, wenn ich das script direkt in meine .html Datei rein schreibe.
 
Zuletzt bearbeitet:
Werbung:
Die .html Datei lautet folgender Maßen:
HTML:
<head>
  ...
  <script type="text/javascript" src="java.js"></script>
</head>
Und in meiner .js Datei steht:
Javascript:
<script src="[URL]http://code.jquery.com/jquery-1.10.2.min.js[/URL]"></script>
        <script type="text/javascript">
            ...
        </script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script>
              ...
        </script>
Fehler #1: <script></script>, sowie die Referenz zu *.js-Dateien haben in "java.js" nichts zu suchen.
Code:
$(document).ready(function(){
  $('.menubutton').click(function(){
    $('nav').slideToggle('slow');
  });
  $(window).scroll(function(){
    if ($(this).scrollTop() > 100){
      $('.scrollup').fadeIn();
    } else {
      $('.scrollup').fadeOut();
    }
  });
  $('.scrollup').click(function(){
    $("html, body").animate({scrollTop: 0}, 600);
    return false;
  });
});
Fehler #2: Es wird nur eine jQuery-Bibliotheksdatei im HTML-Dokument implementiert.
HTML:
<head>
  ...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <script src="java.js"></script>
</head>
Ich habe das Scipt auch schon direkt in meine .html Datei geschrieben, und das hat dann auch funktioniert, allerdings hat die Seite immer ewig zum Laden gebraucht.
Wird in dem Moment wohl am Server von jQuery oder GoogleAPIs gelegen haben, woher Du die jQuery-Lib beziehst.

Alternativ kann die Bibliotheksdatei heruntergeladen, und auf dem eigenen Server hinterlegt werden.
 
Fehler #1:
Wird in dem Moment wohl am Server von jQuery oder GoogleAPIs gelegen haben, woher Du die jQuery-Lib beziehst.

Alternativ kann die Bibliotheksdatei heruntergeladen, und auf dem eigenen Server hinterlegt werden.

Danke für den Tipp
Aber, was mir gerade aufgefallen ist:
In meiner JavaScript Datei stehen 2 Scripte drinn, eins für den Menubutton in der mobilen Ansicht und eins für den Scrollup button.
Das erste für den Menübutton geht, nur das zweite für den scrollup button nicht.
 
Werbung:
Kann es vielleicht sein, dass ich irgendwo einen Fehler drinn hab
Oder meinst du, die Funktion kann so überhaupt gehen?
Müsste sie ja eigendlich schun, da es ja klappt, wenn ich das script direkt in meine .html Datei rein schreibe.
Wie gesagt, Fehler #1 ist der Grund dafür, dass auf diese Weise nichts mehr läuft.

Ist @Tronjer vielleicht (noch) nicht aufgefallen, dass der gesamte jQuery-Code (Lib + Scripts) incl. der einzelnen <script></script>-Tags in "java.js" steckt ???
 
Werbung:
@Spicelab
die console zeigt an:
Uncaught SyntaxError: Unexpected token < java.js:1
Und nun rate mal, worauf sich das <-Zeichen in der ersten Zeile Deines Scripts bezieht :(
In meiner JavaScript Datei stehen 2 Scripte drinn, eins für den Menubutton in der mobilen Ansicht und eins für den Scrollup button.
Das erste für den Menübutton geht, nur das zweite für den scrollup button nicht.
Auch nicht mit meinem korrigierten HTML- u. JS-Code?
Die Antwort bist Du mir noch schuldig geblieben.
Btw, java != javascript :cool:
 
@Spicelab

Wenn ich nur so wie du geschrieben hast


$(document).ready(function(){
$('.menubutton').click(function(){
$('nav').slideToggle('slow');
});
$(window).scroll(function(){
if ($(this).scrollTop() > 100){
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({scrollTop: 0}, 600);
return false;
});
});



reinschreibe, bringt er die fehlermeldung:
Uncaught ReferenceError: $ is not defined
 
Zuletzt bearbeitet:
@Spicelab

Wenn ich nur so wie du geschrieben hast
  1. $(document).ready(function(){
  2. $('.menubutton').click(function(){
  3. $('nav').slideToggle('slow');
  4. });
  5. $(window).scroll(function(){
  6. if ($(this).scrollTop() > 100){
  7. $('.scrollup').fadeIn();
  8. } else {
  9. $('.scrollup').fadeOut();
  10. }
  11. });
  12. $('.scrollup').click(function(){
  13. $("html, body").animate({scrollTop: 0}, 600);
  14. return false;
  15. });
  16. });



reinschreibe, bringt er die fehlermeldung:
Uncaught ReferenceError: $ is not defined
Und die besagt letztlich, dass die erforderliche jQuery-Bibliothek im HTML-Dokument fehlt.

Siehe hierzu nochmal den HTML-Code in meiner ersten Antwort bzgl. Fehler #2:
Fehler #2: Es wird nur eine jQuery-Bibliotheksdatei im HTML-Dokument implementiert.
HTML:
<head>
  ...
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <script src="java.js"></script>
</head>
EDIT:

Hab die fehlerbereinigte Fassung aus Post #5 jetzt lokal getestet. Keinerlei Fehlermeldungen. Alle drei jQuery-Scripts verrichten ordnungsgemäß ihren Dienst.
 
Werbung:
OOOH, vielen lieben Dank @Spicelab , habe es zum Laufen gebracht.
Hätte mir vorher zumindest mal die Grundkenntnisse von JavaScript anlesen sollen...dann hätte ich auch gewusst, was ich in eine .js Datei reinschreiben soll und was nicht.
Aber jetzt funktioniert alles, vielen Dank
HTML:
<!DOCTYPE    html>
<html>
    <head>
        <title>Musterseite</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <meta charset="utf-8" />
        <meta name="viewport" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
        <script src="[URL]http://code.jquery.com/jquery-1.10.2.min.js[/URL]"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script type="text/javascript" src="java.js"></script>
    </head>
    <body>
    </body>
Code:
/*Menubutton */
        $(document).ready(function() {
        $('.menubutton').click(function() {
        $('nav').slideToggle('slow');});});
    /*Menubutton*/
 
    /*Scrollup-Button*/
        $(document).ready(function (){
          $(window).scroll(function (){
    if ($(this).scrollTop() > 100){
        $('.scrollup').fadeIn();}
  else {$('.scrollup').fadeOut();}});
          $('.scrollup').click(function () {
        $("html, body").animate({scrollTop: 0}, 600);
        return false;});});
    /*Scrollup-Button*/
 
Zuletzt bearbeitet:
OOOH, vielen lieben Dank, habe es zum Laufen gebracht.
Hätte mir vorher zumindest mal die Grundkenntnisse von JavaScript anlesen sollen...dann hätte ich auch gewusst, was ich in eine .js Datei reinschreiben soll und was nicht.
Aber jetzt funktioniert alles, vielen Dank
HTML:
<!DOCTYPE    html>
<html>
    <head>
        <title>Musterseite</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <meta charset="utf-8" />
        <meta name="viewport" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
        <script src="[URL]http://code.jquery.com/jquery-1.10.2.min.js[/URL]"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script type="text/javascript" src="java.js"></script>
    </head>
    <body>
    </body>
Code:
/*Menubutton */
        $(document).ready(function() {
        $('.menubutton').click(function() {
        $('nav').slideToggle('slow');});});
    /*Menubutton*/

    /*Scrollup-Button*/
        $(document).ready(function (){
          $(window).scroll(function (){
    if ($(this).scrollTop() > 100){
        $('.scrollup').fadeIn();}
  else {$('.scrollup').fadeOut();}});
          $('.scrollup').click(function () {
        $("html, body").animate({scrollTop: 0}, 600);
        return false;});});
    /*Scrollup-Button*/
Zeile 9 im HTML-Code bitte noch löschen (bevor Du hier irgendwann mit dem nächsten Problem aufschlägst), und $(document).ready() (https://learn.jquery.com/using-jquery-core/document-ready/) genügt einmal (siehe mein Script).
 
Werbung:
achso, ok @Spicelab . Danke
Meinst du, ich soll die Verlinkungen ganz runrer unter meinen Content machen, dass der Browser zuerst den content lädt und dann das JavaScript?
 
achso, ok @Spicelab . Danke
Meinst du, ich soll die Verlinkungen ganz runrer unter meinen Content machen, dass der Browser zuerst den content lädt und dann das JavaScript?
Ist so üblich, JS erst am Seitenende vor </body> einzubinden :)

Das erübrigt dann das $(document).ready() in Deinem jQuery-Script, weil zu diesem Zeitpunkt die Seite vollständig geladen ist, und somit im DOM alle Elemente, die per jQuery manipuliert werden sollen, dem Script bekannt sind :cool:
 
Werbung:
Zurück
Oben