Jump to content

Recommended Posts

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);

Link to comment
https://forums.phpfreaks.com/topic/181513-js-overwriting-itself-in-php-loop/
Share on other sites

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=

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?

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.