Sunday 30 August 2015

Spot The Bug: The Undisplayable Array

Hello and welcome to another round of Spot The Bug!

Bring it on!


If the last one caused you to facepalm, this one might induce you to blow your brains out. I call it a monumental example of were-you-even-thinking-at-all. So here goes!

I had a gallery of thumbnails that I wanted to test some CSS on. My intention was to store them in a PHP array and then output them via a For loop. The array was for my convenience so I could just add and delete the thumbnails in the array as and when I needed a bigger or smaller number of thumbnails. I used different colors to represent different pictures. The code:
<?php
$thumbails=array();
$thumbnails[]["label"]="Sir Lancelot";
$thumbnails[]["border"]="#FF99FF";
$thumbnails[]["bg"]="#AA4488";

$thumbails=array();
$thumbnails[]["label"]="Sir Tristan";
$thumbnails[]["border"]="#336699";
$thumbnails[]["bg"]="#00FFFF";

$thumbails=array();
$thumbnails[]["label"]="Sir Percival";
$thumbnails[]["border"]="#EF7700";
$thumbnails[]["bg"]="#1509FF";

$thumbails=array();
$thumbnails[]["label"]="Sir Lionel";
$thumbnails[]["border"]="#3F4F5F";
$thumbnails[]["bg"]="#119955";

$thumbails=array();
$thumbnails[]["label"]="Sir Galahad";
$thumbnails[]["border"]="#FFFF44";
$thumbnails[]["bg"]="#008899";

$thumbails=array();
$thumbnails[]["label"]="Sir Gaheris";
$thumbnails[]["border"]="#003586";
$thumbnails[]["bg"]="#DD8799";

echo "<h1>Knights of the Round Table</h1>";

foreach ($thumbnails as $thumb)
{
    echo "<div style=\"width:100px;height:100px;padding:10px;margin:10px;float:left;font-weight:bold;text-align:center;border:1px solid ".$thumb["border"].";color:".$thumb["border"].";background-color:".$thumb["bg"]."\">";
    echo $thumb["label"];
    echo "</div>";
}
?>

Knights of the Round Table

Sir Gaheris

What went wrong 

The entire gallery of thumbnails had only one div shown, no matter how many array elements I copied and pasted into the code!

Why it went wrong 

It was precisely because of all the blind copy-pasting. Note the following highlighted in red. I'd included the array initialization with every array element declaration. So each time I added an array element, before that, I re-initialized the array, causing it to be wiped clean! So the only array element left would always be the most recent one.

<?php
$thumbails=array();
$thumbnails[]["label"]="Sir Lancelot";
$thumbnails[]["border"]="#FF99FF";
$thumbnails[]["bg"]="#AA4488";

$thumbails=array();
$thumbnails[]["label"]="Sir Tristan";
$thumbnails[]["border"]="#336699";
$thumbnails[]["bg"]="#00FFFF";

$thumbails=array();
$thumbnails[]["label"]="Sir Percival";
$thumbnails[]["border"]="#EF7700";
$thumbnails[]["bg"]="#1509FF";

$thumbails=array();
$thumbnails[]["label"]="Sir Lionel";
$thumbnails[]["border"]="#3F4F5F";
$thumbnails[]["bg"]="#119955";

$thumbails=array();
$thumbnails[]["label"]="Sir Galahad";
$thumbnails[]["border"]="#FFFF44";
$thumbnails[]["bg"]="#008899";

$thumbails=array();
$thumbnails[]["label"]="Sir Gaheris";
$thumbnails[]["border"]="#003586";
$thumbnails[]["bg"]="#DD8799";

echo "<h1>Knights of the Round Table</h1>";

foreach ($thumbnails as $thumb)
{
    echo "<div style=\"width:100px;height:100px;padding:10px;margin:10px;float:left;font-weight:bold;text-align:center;border:1px solid ".$thumb["border"].";color:".$thumb["border"].";background-color:".$thumb["bg"]."\">";
    echo $thumb["label"];
    echo "</div>";
}
?>

How I fixed it 

I removed all those lines save for the first instance. Instant gallery!
Sir Lancelot
Sir Tristan
Sir Percival
Sir Lionel
Sir Galahad
Sir Gaheris

Moral of the story

Had to sternly remind myself to go easy on the copy-pasting. That actually is one of the most popular causes of errors.

Thanks for reading. Good knight!
T___T

No comments:

Post a Comment