I have a problem. I wrote some PHP code that echoes "var pixelArray = [];". after that it echoes a few variables like this: "var canvas$id = 'can' + $id;". and also echoes "pixelArray.push(canvas$id);" for each variable.
Now for some reason when i run the script, the array doesn't contain anything.
Can anyone explain to me why?
If you need more information, please tell me.
EDIT:
Here's my full (but still simplyfied) code:
<?php
$blockCounter = 1;
$scriptCounter = 1;
$arrayCounter = 1;
$size = 32 * 32;
$yLine = 1;
while ($blockCounter <= $size)
{
if ($blockCounter == 32 * $yLine){
echo "<canvas id=\"can$blockCounter\" width=\"17\" height=\"17\" style='border:1px solid #777777;'>GET A NEW BROWSER</canvas>";
echo "<br>";
$blockCounter = $blockCounter + 1;
$yLine = $yLine + 1;
}
else{
echo "<canvas id=\"can$blockCounter\" width=\"17\" height=\"17\" style='border:1px solid #777777;'>GET A NEW BROWSER</canvas>";
$blockCounter = $blockCounter + 1;
}
}
echo "<script>";
echo "var pixelArray = [];";
while ($arrayCounter <= $size)
{
echo "var name$arrayCounter = 'can' + $arrayCounter;";
echo "pixelArray.push(name$arrayCounter);";
$arrayCounter = $arrayCounter + 1;
}
while ($scriptCounter <= $size)
{
echo "var c = document.getElementById(\"can$scriptCounter\");";
echo "picoco$scriptCounter = c.style.backgroundColor = \"#000000\";";
$scriptCounter = $scriptCounter + 1;
}
echo "document.getElementById(\"arrayLoc\").innerHTML = pixelArray[0];";
echo "</script>";
?>
<p id="arrayLoc"></p>
document.getElementById("arrayLoc") is returning null, not the pixelArray[0]. The problem is that the paragraph tag has not been loaded into the DOM at the time of the javascript load. You can put it above the script shown below.
echo '<p id="arrayLoc"></p>';
echo "<script>"
echo "var pixelArray = [];";
while ($arrayCounter <= $size)
{
echo "var name$arrayCounter = 'can' + $arrayCounter;";
echo "pixelArray.push(name$arrayCounter);";
$arrayCounter = $arrayCounter + 1;
}
while ($scriptCounter <= $size)
{
echo "var c = document.getElementById(\"can$scriptCounter\");";
echo "picoco$scriptCounter = c.style.backgroundColor = \"#000000\";";
$scriptCounter = $scriptCounter + 1;
}
echo "document.getElementById(\"arrayLoc\").innerHTML = pixelArray[0];";
echo "</script>";
?>
Or run the javascript after the DOM has loaded.
echo "<script>";
echo "window.onload = function () {";
echo "var pixelArray = [];";
while ($arrayCounter <= $size)
{
echo "var name$arrayCounter = 'can' + $arrayCounter;";
echo "pixelArray.push(name$arrayCounter);";
$arrayCounter = $arrayCounter + 1;
}
while ($scriptCounter <= $size)
{
echo "var c = document.getElementById(\"can$scriptCounter\");";
echo "picoco$scriptCounter = c.style.backgroundColor = \"#000000\";";
$scriptCounter = $scriptCounter + 1;
}
echo "document.getElementById(\"arrayLoc\").innerHTML = pixelArray[0];";
echo "}";
echo "</script>";
?>
<p id="arrayLoc"></p>