[GELÖST] Ein Javascript doppelt einbinden funktioniert nicht

Tasha · 09. Mai 2015

Hallo alle zusammen!

Ich habe ein Problem beim Einbinden eines Javascriptes, in dem Moment, wo ich das gleiche Script auf der Seite zwei Mal verwenden möchte. Ich habe bereits viel im Internet, und auch hier im Forum geforscht, aber auf mein konkretes Problem keine Lösung gefunden. Obwohl es das Problem, daß sich zwei Javascripts gegenseitig behindern, öfter gibt, scheint jeder Fall wieder anders gelagert zu sein, so daß mich keine der anderen Lösungen weitergebracht hat. Deswegen möchte ich euch mein Problem einmal schildern in der Hoffnung, daß mir jemand helfen kann. Sollte ich die Lösung meines Problems hier irgendwo übersehen haben, dann tut es mir leid. Das war dann keine böse Absicht.

Also, vorab, es geht um folgendes Script:

Code:

<script language="JavaScript">
TargetDate = "06/10/2015 12:00 AM";
BackColor = "brown";
ForeColor = "white";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "It is finally here!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>

Hierbei handelt es sich, wie man sieht, um einen ganz einfachen Countdown. Binde ich ihn einmal auf der Seite ein, funktioniert er reibungslos. Nun möchte ich aber zwei Countdowns auf der gleichen Seite einbinden. Hierzu habe ich einfach das gleiche Script zwei Mal hintereinander (deutlich voneinander getrennt!) verwendet. Dies hat zur Folge, daß im zweiten Countdown die Zeit, die runtergezählt wird, gar nicht mehr angezeigt wird, und im ersten werden beide vermixt (die verbleibende Zeit des einen und des anderen werden dort abwechselnd angezeigt).

Gibt es irgendeinen Trick, wie man den Countdown doch zwei Mal verwenden kann, oder habe ich etwas übersehen und falsch gemacht?

Meine Website ist php-basierend, ich nutze Win7 und den Firefox. Das Script ist direkt in der .inc-Datei eingebunden.

Falls ihr noch Informationen braucht, immer her damit. Ich kann zwar recht gut mit der Programmierung von Websites umgehen, bin aber weit davon entfernt, ein Profi zu sein, so daß man es mir nachsehen mag, wenn eine wichtige Information jetzt ad hoc fehlen sollte.

Vielen Dank schon mal vorab für eure Hilfe!

Beste Grüße,
Tasha

mikdoe · 09. Mai 2015

Ohne den Text vollständig gelesen zu haben sehe ich, dass deine Variablen global sind. Das solltest du zuerst mal ändern und dann nochmal probieren.

Tasha · 09. Mai 2015

mikdoe schrieb:
Ohne den Text vollständig gelesen zu haben sehe ich, dass deine Variablen global sind. Das solltest du zuerst mal ändern und dann nochmal probieren.

Okay… Nun bin ich kein Javascript-Experte, sondern war nur froh, daß ich dieses kleine Script gefunden habe, das dann auch auf meiner Seite funktionierte. Magst du mir helfen und ein bißchen näher ausführen, was ich dafür tun muß? Ich habe nämlich gerade absolut keine Vorstellung davon, was das jetzt für mich in der Programmierung heißt…

mikdoe · 09. Mai 2015

Ja, mache ich später oder morgen ganz früh sehr gern. Im Moment bin ich bisschen knapp, sorry, war keine böse Absicht.

Tasha · 09. Mai 2015

mikdoe schrieb:
Ja, mache ich später oder morgen ganz früh sehr gern. Im Moment bin ich bisschen knapp, sorry, war keine böse Absicht.

Gar kein Problem! Bin doch froh über jede Hilfe, die ich kriegen kann.

kkapsner · 10. Mai 2015

Das Skript in http://scripts.hashemian.com/js/countdown.js ist einfach dafür nicht ausgelegt und deswegen kannst du da auch nicht viel machen, außer dir einen anderen Countdown zu suchen/schreiben. Ein erster Ansatz wäre:

Code:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<script type="text/javascript">
function createCountDown(aimDate, displayNode, format){
	console.log(aimDate);
	format = format || "%d days, %h hours, %m minutes, %s seconds";
	function output(){
		var dist = aimDate.getTime() - Date.now();
		var milliseconds = dist % 1000;
		dist -= milliseconds;
		dist /= 1000;
		var seconds = dist % 60;
		dist -= seconds;
		dist /= 60;
		var minutes = dist % 60;
		dist -= minutes;
		dist /= 60;
		var hours = dist % 24;
		dist -= hours;
		dist /= 24;
		var days = dist;
		displayNode.innerHTML = "";
		displayNode.appendChild(document.createTextNode(
			format
				.replace(/%s/ig, function(){return seconds;})
				.replace(/%m/ig, function(){return minutes;})
				.replace(/%h/ig, function(){return hours;})
				.replace(/%d/ig, function(){return days;})
		));
		window.setTimeout(output, milliseconds);
	}
	output();
}
</script>
<style type="text/css"></style>
</head>
<body>
<div id="countdown1"></div>
<div id="countdown2"></div>
<script>
createCountDown(new Date("2015/05/18 15:00"), document.getElementById("countdown1"));
createCountDown(new Date("2015/05/15 12:00"), document.getElementById("countdown2"), "%d Tage, %h Stunden, %m Minuten, %s Sekunden");
</script>
</body>
</html>

- wobei da noch ein paar Sachen fehlen.

Tasha · 10. Mai 2015

Hm. Das wäre ja wirlich schade. Da habe ich wohl ein bißchen zu simpel gedacht, als ich mir vorgestellt habe, daß ein Script (wie jede andere Programmierung) immer in sich geschlossen ist.

Okay, so auf die Schnelle etwas so komplex neues zu basteln, wie du es vorgeschlagen hast, lohnt sich da für mich nicht mehr, zum einen, weil ich - wie ja bereits erwähnt - weit entfernt davon bin, mich mit der Programmierung von JavaScripts auszukennen, und ich es auch nur jetzt gerade für eine kurze Übergangszeit bräuchte. Der Aufwand würde den Effekt nicht rechtfertigen. Falls nicht jemand noch eine einfache Lösung für mich hat, würde ich ein Script jetzt einfach erst mal rauswerfen, bis das andere durchgelaufen ist. :uncomfortableness:

Transformator · 10. Mai 2015

Das hier funktioniert:

Du kannst diesen Code einfach 2x einfügen und beim zweiten mal alle 1_ durch 2_ ersetzen.

LG

Code:

<script>
TargetDate_1 = "12/31/2020 5:00 AM";
BackColor_1 = "palegreen";
ForeColor_1 = "navy";
CountActive_1 = true;
CountStepper_1 = -1;
LeadingZero_1 = true;
DisplayFormat_1 = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage_1 = "It is finally here!";

function calcage_1(secs, num1, num2) {
  s = ((Math.floor(secs/num1))%num2).toString();
  if (LeadingZero_1 && s.length < 2)
    s = "0" + s;
  return "<b>" + s + "</b>";
}

function CountBack_1(secs) {
  if (secs < 0) {
    document.getElementById("cntdwn_1").innerHTML = FinishMessage_1;
    return;
  }
  DisplayStr_1 = DisplayFormat_1.replace(/%%D%%/g, calcage_1(secs,86400,100000));
  DisplayStr_1 = DisplayStr_1.replace(/%%H%%/g, calcage_1(secs,3600,24));
  DisplayStr_1 = DisplayStr_1.replace(/%%M%%/g, calcage_1(secs,60,60));
  DisplayStr_1 = DisplayStr_1.replace(/%%S%%/g, calcage_1(secs,1,60));

  document.getElementById("cntdwn_1").innerHTML = DisplayStr_1;
  if (CountActive_1)
    setTimeout("CountBack_1(" + (secs+CountStepper_1) + ")", SetTimeOutPeriod_1);
}

function putspan_1(backcolor, forecolor) {
 document.write("<span id='cntdwn_1' style='background-color:" + backcolor + 
                "; color:" + forecolor + "'></span>");
}

if (typeof(BackColor_1)=="undefined")
  BackColor_1 = "white";
if (typeof(ForeColor_1)=="undefined")
  ForeColor_1= "black";
if (typeof(TargetDate_1)=="undefined")
  TargetDate_1 = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat_1)=="undefined")
  DisplayFormat_1 = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive_1)=="undefined")
  CountActive_1 = true;
if (typeof(FinishMessage_1)=="undefined")
  FinishMessage_1 = "";
if (typeof(CountStepper_1)!="number")
  CountStepper_1 = -1;
if (typeof(LeadingZero_1)=="undefined")
  LeadingZero_1 = true;


CountStepper_1 = Math.ceil(CountStepper_1);
if (CountStepper_1 == 0)
  CountActive_1 = false;
var SetTimeOutPeriod_1 = (Math.abs(CountStepper_1)-1)*1000 + 990;
putspan_1(BackColor_1, ForeColor_1);
var dthen_1 = new Date(TargetDate_1);
var dnow_1 = new Date();
if(CountStepper_1>0)
  ddiff_1 = new Date(dnow_1-dthen_1);
else
  ddiff_1 = new Date(dthen_1-dnow_1);
gsecs_1 = Math.floor(ddiff_1.valueOf()/1000);
CountBack_1(gsecs_1);

</script>

Tasha · 10. Mai 2015

@Transformator:
Großartig! Genau so sollte das aussehen!
(Du hast jetzt aber nicht für mich das Script umgeschrieben, oder? *gg*)

Vielen, vielen Dank für deine Hilfe, das kam genau richtig. (Bin gerade sowas von glücklich! ^^)

(Wenn du dir das Resultat deiner Hilfe ansehen möchtest, dann kannst du es dir in ca. einer Viertelstunde hier anschauen: Filmations Ghostbusters Fansite. Ich wußte doch, daß das möglich sein muß! ^^)

Vielen Dank noch mal. Das Problem kann als erledigt betrachtet werden! ^^
Beste Grüße,
Tasha

kkapsner · 10. Mai 2015

Tasha schrieb:
so komplex neues zu basteln

So komplex ist das jetzt auch wieder nicht. Du kannst meinen Code einfach nehmen und noch um das erweitern, was du gerne noch dabei hättest (z.B. eine Nachricht, wenn der Timer abgelaufen ist).

Transformator schrieb:
1_ durch 2_ ersetzen

Naja - wirklich sauber ist das aber nicht...

Tasha · 10. Mai 2015

kkapsner schrieb:
So komplex ist das jetzt auch wieder nicht. Du kannst meinen Code einfach nehmen und noch um das erweitern, was du gerne noch dabei hättest (z.B. eine Nachricht, wenn der Timer abgelaufen ist).

Für jemanden, der nie mit Holz gearbeitet hat, ist es auch komplex, ein Brett sauber in zwei Hälften zu sägen! Da nützt es nichts, wenn es dem Bastler einfach fällt!

kkapsner schrieb:
Naja - wirklich sauber ist das aber nicht...

??? Es funktioniert! Was will ich mehr?

Transformator · 10. Mai 2015

Ja, man hätte auch alles in helper-functions ändern können, und dann eine Alles umfassende Funktion erstellen können, oder auch einfach in Zeile 42

Code:

setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);

in

Code:

setTimeout(CountBack(secs+CountStepper), SetTimeOutPeriod);

ändern können, mit der folge, dass man das ganze in eine Self-Init funktion schreiben könnte:

Code:

(function() {
  // hier der code
}) ();

und damit das ganze 2 mal ausfühen könnte, dann hätte man soetwas wie eine "ID" hinzufügen können und das ganze dann so ausführen:

Code:

<script>var id = 0;</script>
<script src="countdown.js"></script>
<script> id = 1</script>
<script src="countdown.js"></script>

aber ich glaube eigentlich hat das so ausgereicht

@Tasha: die Website sieht übrigens ziemlich geil aus

kkapsner · 12. Mai 2015

Tasha schrieb:
Da nützt es nichts, wenn es dem Bastler einfach fällt!

Es wäre eine Gelegenheit, das Basteln zu lernen...

War ja auch nur ein Hinweis von mir.

Tasha · 17. Mai 2015

kkapsner schrieb:
Es wäre eine Gelegenheit, das Basteln zu lernen...

Das würde ich auch gerne! Das nützt mir nur nichts in dem Moment, wo mich (als Laie) so etwas unerwartet trifft, ich nur noch eine Handvoll Tage Zeit habe, und ich diese händeringend damit beschäftigt bin, mein Cosplay für die Veranstaltung, für die der Countdown laufen soll, auf die Beine zu stellen. Verstehste, was ich meine?

Von daher war der Hinweis voll in Ordnung; du darfst dich aber gerne auch einfach mit mir freuen, daß es so schnell und unkompliziert funktioniert hat.

Wenn ich jetzt, nach der FedCon, den Kopf wieder mehr frei habe, dann würde ich schon gerne etwas tiefer in die Materie einsteigen. Aber dann habe ich auch die nötige Ruhe und Gelassenheit, um damit richtig vernünftig anfangen zu können. Und vielleicht habt ihr ja dann auch einen guten Tip für mich, wie man als absoluter Neueinsteiger und Grünling in Sachen Java am besten anfangen kann. :icon6:

@Transformator:
Vielen Dank für das Kompliment! Diese Website ist wirklich mein Baby, von daher hört man das doch gerne, wenn sie gefällt!

Ja, so ganz unbedarft bin ich in der Programmiererei nicht! HTML und PHP machen (mir) richtig Spaß. Ich muß nur noch mehr über die Zusammenhänge und das »behind the scenes« lernen, und ein paar neue Sachen lernen. Java war bislang für mich ein Buch mit sieben Siegeln, weil ich dachte, daß es unheimlich kompliziert sein muß. Ich war schon froh, wenn ich es geschafft habe, ein JavaScript erfolgreich einzubinden. Aber wahrscheinlich muß man sich da auch einfach nur mal rantrauen.

Vielen Dank jedenfalls für die schnelle, unkomplizierte Hilfe, als ich es wirklich gebraucht habe! :icon6:

kkapsner · 21. Mai 2015

Tasha schrieb:
Und vielleicht habt ihr ja dann auch einen guten Tip für mich, wie man als absoluter Neueinsteiger und Grünling in Sachen Java am besten anfangen kann.

zuerst, dass du es hier nicht mit Java, sondern mit JavaScript zu tun hast...

Du wirst sonst eine harte Zeit bei der Suche im Netz haben.

Ich bin der Meinung, dass der beste Tip immer ist, sich ein Projekt zu suchen, anhand dem man eine Sprache lernen will. Dabei lernt man am schnellsten.

Bei konkreten Fragen kannst du dich ja hier melden.

[GELÖST] Ein Javascript doppelt einbinden funktioniert nicht

Tasha

New member

mikdoe

Moderator

Tasha

New member

mikdoe

Moderator

Tasha

New member

kkapsner

Super Moderator

Tasha

New member

Transformator

New member

Tasha

New member

kkapsner

Super Moderator

Tasha

New member

Transformator

New member

kkapsner

Super Moderator

Tasha

New member

kkapsner

Super Moderator