I am currently stuck on a problem and not sure how to solve it. I am new to php and javascript coding so do please correct me if there is an easier way to do this.
I am making a football player auction website. It's like ebay except it's players instead of items. Basically you put players for sell and there will be a countdown timer.
My problem is that I am trying to get a countdown timer working for multiple players. I have already made a successful countdown time function that only works with one player, but when I try to do it with multiple players it doesn't work as intended. It only updates the last player.
This is the output for one player.
Player Name: Rooney
Hours:20 Minutes:16 Seconds:56
This is the output for two or more players
Player Name: Messi
Player Name: Beckham
Player Name: Rooney
Hours:20 Minutes:16 Seconds:56
I will explain what I have got so far.
A database which contains Player name and their end time. One php file for connecting to database. Finally a file which contains my script for countdown timer and where I am testing.
Database Structure
|Player Name|------------|End date/time|---------
Messi July 31 2015 05:00:00 PM
Ronaldo July 31 2015 10:00:00 PM
Note the end date time is a string and in the format shown above so I can retrieve the remaining time using strtotime function.
This is how my normal body works. I pick the table above using PHP with MySQL. Then I go in a loop printing out each player's name. During printing each players name I call the timer function to get the countdown time. This function takes in two parameters. First is the end date time. Second parameter is the unique id(div tag). I get the end date/time from the database and I create a unique id tag using an array.
My intention was to create a function which takes the end date and a unique id for the player and then editing it like
document.getElementById(uniqueID).innerHTML =...
as that's the only way to edit the content inside a div I know off and I am creating multiple divs in a loop.
Here's the main script with some comments
//Connecting to database
<?php
include 'connect.php';
?>
<!doctype html>
<html>
<head>
<?php
//array used to create unique id for our divs
$ids = array("one","two","three","four","five","six","seven","eight","nine");
$i =0;
function timer($date, $id){
//changing time to london(uk) time.
date_default_timezone_set("Europe/London");
//converting the string from database into time form
$endtime = strtotime($date);
//Returns the current time
$idtemp = $id;
?>
<script>
//convert server time to milliseconds
var server_current = <?php echo time(); ?> * 1000;
var server_end_time = <?php echo $endtime; ?> * 1000;
var client_current_time = new Date().getTime();
//server end time - server current time + client current time
var finish_time = server_end_time - server_current + client_current_time;
var timer;
var uniqueID = <?php echo json_encode($idtemp); ?> ;
function countdown()
{
var now = new Date();
var left = finish_time - now;
//Following code convert the remaining milliseconds into hours, minutes and days.
//milliseconds conversion
//1000-second 60,000-minute
//3,600,000-hour 86,400,400-hour
var hour = Math.floor( (left % 86000000 ) / 3600000 );
var minute = Math.floor( (left % 3600000) / 60000 );
var second = Math.floor( (left % 60000) / 1000 );
document.getElementById(uniqueID).innerHTML = "Hours:"+hour+" Minutes:"+minute+" Seconds:"+second;
}
timer = setInterval(countdown, 1000);
</script>
<?php }?>
</head>
<body>
<h3>Auction House </h3>
<?php
//select table from database
$result = mysql_query("SELECT * FROM `current auction`");
while($row = mysql_fetch_array($result)){
echo 'Player Name: '. $row['PlayerName'];
$timeleft = $row['Time'];
echo '<div id="c">';
$temp = $ids[$i];
?>
<script>
//Change the div id to the next element in array
document.getElementById("c").setAttribute("id",<?php echo json_encode($temp); ?>);
</script>
<?php
$i = $i +1;
echo $temp;
timer($timeleft, $temp);
echo '</div>';
echo "<br />";
}
?>
</body>
</html>
I am not sure why it isn't working.
Thanks
