Anfängerfrage: externe JavaScript Datei oder Seitenlayout "Eigener JavaScript-Code"?

[d003232]

Nachdem ich meine alte Contao Installation erfolgreich von 3.5.4 auf 4.13 migriert habe, bin ich dabei die alten "Sünden" etwas aufzuräumen.

Ich habe verschiedene Seitenlayouts, die im Bereich "Eigener JavaScript-Code" jeweils den unten stehenden Code benutzen. Zur einfacheren Pflege würde ich diesen nun gerne in eine externe JavaScript-Datei auslagern. Leider klappt das nicht. :-( Ich habe einfach den kompletten Code in eine "scripts.js"-Datei kopiert und diesen als externe JavaScript Datei im Seitenlayout eingebunden. Leider funktionieren die Scripte dann nicht mehr.

Ich bin ziehmliche Anfänger bzgl. JavaScript. Möglicheweise ist es ein einfaches Syntaxproblem, irgend ein Befehl zuviel oder zuwenig? Wer kann mir einen Tipp geben?

Ich bin auch unsicher, ob es tatsächlich sinnvoll ist oder geht, alles JavaScript in die exteren Datei auszulagen? Gibt es etwas, was man sinnvollerweise im "eigenen JavaScript-Code" belässt? Performancegesichtspunkte?

LG

Inhalt aus dem Feld "Eigener JacaSCript-Code":

<!-- Nach oben Button ein-/ausblenden-->
<script type="text/javascript">
  $('div#nach_oben_link').hide();
  $(window).scroll(function(){
    var value = 200;
    var scrolling = $(window).scrollTop();
	if (scrolling > value) {
	  $('div#nach_oben_link').fadeIn();
	}else{
	  $('div#nach_oben_link').fadeOut();
	}
});
</script>

<!-- sanft zum Seitenanfang scrollen -->
<script>
$("a.link_hoch").on("click", function (e) {
  e.preventDefault(); // default Aktion Link verhindern
  $("html, body").animate({ scrollTop: "0" }, 3000);
});</script>

<!--  BOX  RECHTS für Sofort Angebot -->
<script>
// GLobale Vars bestimmen  Rechte Spalte, Oberste Box = Klassendefinition 
var right = document.getElementById("right");
var Klasse   = document.getElementById("box-sofort-buchen").className;
var neueKlasse = Klasse + ' fixed_box';
document.body.onresize = function(){
	if (window.innerWidth<770){
	    document.getElementById("box-sofort-buchen").className = Klasse;	
	}
}
</script>

<!-- Sofort Buchen Box beim Wegscrollen unten fixieren -->
<script type="text/javascript">
document.body.onscroll = function ()
{
  if (window.innerWidth>770){
	// höhe der elemente und position für 
	var hoch         = right.clientHeight;
	var top          = right.offsetTop;
	var bottom       = hoch+top;
	
	// scroll verhalten
    var scrollY      = 0;
    var scrollY      = window.pageYOffset;
    
    //#container   für positionsermittlung
    var main         = document.getElementById("main").clientWidth;
    var inWidth      = window.innerWidth;
    var contWidth    = document.getElementById("container").clientWidth;
    var posDiff      = inWidth - contWidth;
    posDiff          = posDiff / 2;
    var left         = posDiff + main;
    
    document.getElementById("box-sofort-buchen").className = Klasse;

    if ( scrollY > bottom + 15 )
    {
        document.getElementById("box-sofort-buchen").className = neueKlasse;
        document.getElementById("box-sofort-buchen").style.left = left;
    }
  }
}
</script>
	
<!-- Fancybox Einbinden -->
<script src="assets/jquery/fancybox/4.0.31/fancybox.umd.js"></script>
<script>
// FancyBox Grundeinstellungen -->
(function($) {
	$('[data-fancybox]').fancybox({
	loop : true,
	toolbar  : true,
	toolbar  : true,
	preload : true,
        buttons : [
            'close'
        ],
	});
})(jQuery);	
</script>
<!-- FancyBox -->

<!-- Google AdSense -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Ferienhaus 160x600 -->
<ins class="adsbygoogle"
     style="display:inline-block; width:160px; height:600px; margin: 10px 0px 0px 10px;"
     data-ad-client="ca-pub-5129031934272393"
     data-ad-slot="7660005529"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<!-- GA Opt-Out Code -->
<script type="text/javascript">
var gaProperty = ''UA-2560011-12';
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
window[disableStr] = true;
}
function gaOptout() {
document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC;
path=/';
window[disableStr] = true;
alert('Das Tracking durch Google Analytics wurde in Ihrem Browser für diese
Website deaktiviert.');
}
</script>

[Doi]

Hallo,
anbei ein paar Anhaltspunkte, die dir ggf. bei der Fehlersuche helfen:

• hast du die <script>-Tags mit in deine JS-Datei gepackt? Das dürfte natürlich nicht sein
• gibt es Fehler in der Konsole?
• Auch die Skripte wie assets/jquery/fancybox/4.0.31/fancybox.umd.js müsstest du über das Feld "Externe JavaScripts" einbinden (oberhalb deiner eigenen JS-Dateien)
• Du verwendest jQuery. Ist die Library auch eingebunden?
• Google Analytics könntest du über das analytics-Template einbinden oder ein entsprechendes Consent Tool nutzen

LG

[d003232]

[*] hast du die <script>-Tags mit in deine JS-Datei gepackt? Das dürfte natürlich nicht sein

Habe ich. Ok. Muss ich weg lassen.

[*] gibt es Fehler in der Konsole?

Welche Konsole? Im Firebox Untersuchen / Debugger?

[*] Auch die Skripte wie assets/jquery/fancybox/4.0.31/fancybox.umd.js müsstest du über das Feld "Externe JavaScripts" einbinden (oberhalb deiner eigenen JS-Dateien)

Ok. Verstanden

[*] Du verwendest jQuery. Ist die Library auch eingebunden?

Ja, gemacht.

[*] Google Analytics könntest du über das analytics-Template einbinden oder ein entsprechendes Consent Tool nutzen

Ja. Ich habe den Google-Tagmanager über die cookiebar eingebunden. Da muss ich als nächsten Schritt wohl noch das Google AdSense über den Tag-Manager einbinden. Den Google Op-Out Code brauche ich vermutlich nicht mehr. Da ist ja dann auch über die cookiebar abgedeckt.

Vielen Dank. Nun kann ich wieder eine Richtung zum Weitersuchen.

[Doi]

Welche Konsole? Im Firebox Untersuchen / Debugger?

Ja, genau. Innerhalb der Entwicklertools (F12)

[d003232]

Klasse. Nun funktioniert alles!

Es lag nur daran, dass ich in der externen JS-Datei auch <script>-Tags hatte. Nun sind die weg und alles ist perfekt.