JS overwriting itself in php loop

[dwellersire]

I am attempting to include a javascript counter inside my php script. I am generating the variables for the countdown time using a php loop. My goal was to create one javascript counter for each loop iteration, but instead the javascript counter appears in only the first loop, and sometimes the numbers are flipping around, so I assume the values are getting overwritten or they are all lumped up in the same place.

 

Here is the code inside my php loop:

 

	
<script language=\"JavaScript\">
TargetDate = \"$t_month/$t_mday/$t_year {$secUntilLaunchTime['hours']}:{$secUntilLaunchTime['minutes']}:{$secUntilLaunchTime['seconds']} $AmPm PST\";
BackColor = \"palegreen\";
ForeColor = \"navy\";
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=\"countdown.js\">

 

Here's the javascript file:

 

/*
Author: Robert Hashemian
http://www.hashemian.com/

You can use this code in any manner so long as the author's
name, Web address and this disclaimer is kept intact.
********************************************************
Usage Sample:

<script language="JavaScript">
TargetDate = "12/31/2020 5:00 AM";
BackColor = "palegreen";
ForeColor = "navy";
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>
*/

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

function CountBack(secs) {
  if (secs < 0) {
    document.getElementById("cntdwn").innerHTML = FinishMessage;
    return;
  }
  DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
  DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
  DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
  DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));

  document.getElementById("cntdwn").innerHTML = DisplayStr;
  if (CountActive)
    setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}

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

if (typeof(BackColor)=="undefined")
  BackColor = "white";
if (typeof(ForeColor)=="undefined")
  ForeColor= "black";
if (typeof(TargetDate)=="undefined")
  TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
  DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
  CountActive = true;
if (typeof(FinishMessage)=="undefined")
  FinishMessage = "";
if (typeof(CountStepper)!="number")
  CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
  LeadingZero = true;


CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
  CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
  ddiff = new Date(dnow-dthen);
else
  ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);

[KevinM1]

You, uh, might want to include the PHP loop, so everyone can see what it's doing....

[dwellersire]

for($i=1;$i <= $waves;$i++) {
echo "Wave $i:<br>
Origination: $x1[$i],$y1[$i]<br>";
$distance = calcDistance($x1[$i],$y1[$i],$x2,$y2);
echo "Distance to target: $distance<br>";

$sec = calcMarchTime($troop[$i],$distance);
$marchTime = $sec;
$min = $sec / 60;
$hour = ($sec / 60) /60;
$sec = $sec % 60;

if($min > 59) $min = $min % 60;
$min = intval($min);
$hour = intval($hour);
printf("March time using $troop[$i] = %'02s:%'02s:%'02s<br>",$hour,$min,$sec);

$sec2 = launchTime($hitTimeSec,$marchTime);
$launchTime = $sec2;
$min2 = $sec2 / 60;
$hour2 = ($sec2 / 60) /60;
$sec2 = $sec2 % 60;

if($min2 > 59) $min2 = $min2 % 60;
$min2 = intval($min2);
$hour2 = intval($hour2);

printf("Time to launch troops = %'02s:%'02s:%'02s<br>",$hour2,$min2,$sec2);

$secUntilLaunchTime = Sec2Time($launchTime);

if($secUntilLaunchTime['hours'] > 12) {
	$AmPm = "PM";
	$secUntilLaunchTime['hours'] -= 12;
} else {
	$AmPm = "AM";
}

echo "
<script language=\"JavaScript\">

  TargetDate = \"$t_month/$t_mday/$t_year {$secUntilLaunchTime['hours']}:{$secUntilLaunchTime['minutes']}:{$secUntilLaunchTime['seconds']} $AmPm PST\";
  BackColor = \"palegreen\";
  ForeColor = \"navy\";
  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=\"countdown.js\">

</script>

<br><br>";
}

 

Here you can see an example of the output I'm getting:

http://blacksun.jlkfree.com/doHostAssassin.php?waves=3&x2=24&y2=36&hitTime=0000&x1_1=20&x1_2=20&x1_3=20&x1_4=&x1_5=&x1_6=&x1_7=&x1_8=&x1_9=&x1_10=&y1_1=20&y1_2=20&y1_3=20&y1_4=&y1_5=&y1_6=&y1_7=&y1_8=&y1_9=&y1_10=&troop_1=warrior&troop_2=archer&troop_3=cavalry&troop_4=&troop_5=&troop_6=&troop_7=&troop_8=&troop_9=&troop_10=

[KevinM1]

Okay, here's what's going on:

 

Your library code (countdown.js) dynamically creates a <span> element to stuff the countdown into.  Each loop your PHP code executes means a new <span> is created for a countdown.

 

The problem is that each <span> has the same id - cntdwn.  So, to be absolutely clear, your test has 3 <span> elements that look like:

 

<span id="cntdwn"></span>

 

Semantically, this is wrong, as an id means a unique value, and thus should be applied to one and ONLY one element in the document.  JavaScript knows this, and simply stuffs the countdown into the first 'cntdwn' <span> it finds, ignoring the others.  So, the countdown that's displayed is for the last wave, even though it looks like it's for the first.

 

Unfortunately, there's no simple, presto-change-o fix for this.  Even if you simply changed the <span> elements from having an id of 'cntdwn' to a class of the same name, you'd still need to figure out which <span> gets the right countdown.

 

I suggest a complete rewrite of the JavaScript.  You can easily generate the conditions for each countdown, as you've already shown.  And there's no need to actually display the countdown during the loop - one of the beauties of JavaScript is that since you can easily grab a hold of the various document elements at any time, you can deal with them whenever you want.  So, why not generate the data during the loop, then, display all of the countdowns at once?

[dwellersire]

interesting stuff...i need to learn javascript & some html. thanks