Use PHP Array inline in Javascript Code

I'm playing around with building a Jeopardy game using PHP, MySql, Javascript and XHTML and maybe jQuery, unless there is a preexisting configurable web application already available.  I have only just started and I'm interested in being able to access PHP arrays from javascript and/or accessing javascript arrays from within PHP.  I have the attached code, which almost does what I am interested in doing but the snippets that fetches the PHP arrays from within javascript doesn't work.

document.getElementById('categories' + (i+1)).innerHTML = '<? echo $catArray[(jeopardyMultiplier-1)][i] ?>';

I take it the subscripts can't be used in that manner within the php code as they are javascript variables.

Can someone educate me on how to do this or on how to simply convert a PHP array to a JS array, which might be easier.
<?php
$dbusername='root';
$db='jeopardy';
$dbpassword='olorin';
function Conectarse()
{
	global $dbusername,$dbpassword,$db;
 
   if (!($link=mysql_connect("localhost",$dbusername,$dbpassword)))
   {
      echo "Error connecting to the database server.";
      exit();
   }
   if (!mysql_select_db($db,$link))
   {
      echo "Error connecting to the database on the server.";
      exit();
   }
   return $link;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body, table, table td {
border:0px;
border-collapse:collapse;
margin:0px;
padding:0px;
}
#board {
margin-left:20px;
}
#board tr td{
background-image:url(boardelementgrad.gif);
background-repeat:none;
height:100px;
width:180px;
border:#000000 solid 3px;
border-collapse:collapse;
text-align:center;
font-size:24px;
}
</style>
</head>
 
<body>
<table id="board">
  <tr id="categories">
    <td id="categories1"></td>
    <td id="categories2"></td>
    <td id="categories3"></td>
    <td id="categories4"></td>
    <td id="categories5"></td>
  </tr>
  <tr id="row1">
    <td id="row1_1"></td>
    <td id="row1_2"></td>
    <td id="row1_3"></td>
    <td id="row1_4"></td>
    <td id="row1_5"></td>
  </tr>
  <tr id="row2">
    <td id="row2_1"></td>
    <td id="row2_2"></td>
    <td id="row2_3"></td>
    <td id="row2_4"></td>
    <td id="row2_5"></td>
  </tr>
  <tr id="row3">
    <td id="row3_1"></td>
    <td id="row3_2"></td>
    <td id="row3_3"></td>
    <td id="row3_4"></td>
    <td id="row3_5"></td>
  </tr>
  <tr id="row4">
    <td id="row4_1"></td>
    <td id="row4_2"></td>
    <td id="row4_3"></td>
    <td id="row4_4"></td>
    <td id="row4_5"></td>
  </tr>
  <tr id="row5">
    <td id="row5_1"></td>
    <td id="row5_2"></td>
    <td id="row5_3"></td>
    <td id="row5_4"></td>
    <td id="row5_5"></td>
  </tr>
</table>
<?php
$query_categories="select * from categories";
$result_categories=mysql_query($query_categories,Conectarse());
for( $i=0; $temp1=mysql_fetch_array($result_categories); $i++ )
		{
		for( $j=0; $j<5; $j++ )
		{
		$catArray[$i][$j] = $temp1[$j];
		}
		}
?>
<script type="text/javascript">
jeopardyMultiplier = 1;
for (i = 0; i <5; i++) {
document.getElementById('categories' + (i+1)).innerHTML = '<? echo $catArray[(jeopardyMultiplier-1)][i] ?>';
}
for (j = 1; j <=5; j++) {
for (i = 1; i <=5; i++) {
document.getElementById('row'+j+'_'+i).innerHTML = jeopardyMultiplier * 100 * j;
}
}
</script>
</body>
</html>

Open in new window

LVL 5
sscottiAsked:
Who is Participating?
 
Terry WoodsConnect With a Mentor IT GuruCommented:
At the start of your javascript code, you could use PHP to generate javascript code which sets all the jeopardyMultiplier values in a javascript array. Your javascript code that's output from the PHP would end up looking something like the answer to this question:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_10289660.html
0
 
Terry WoodsIT GuruCommented:
Remember that PHP runs on the server to generate the page that is sent to the browser, whereas javascript runs while the user is viewing the page.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.