Javascript错误“Null不是对象”，带有动态创建的html表

I have a dynanamically created html table with a picture in the last cell of each row (like.png). What I would like to achieve is after the user has clicked on this picture another one is diplayed (like1.png). However I keep getting "Null is not an Object", there is maybe something wrong with my javascript code ...

Thank you for your help :)

Here is my php that creates the table :

<?php
$pictureid = 1;

            while($results = mysql_fetch_array($raw_results)){
            // $results = mysql_fetch_array($raw_results) puts data from database into array, while it's valid it does the loop

            echo '<tr>';
            echo'<td>'. ucfirst($results['song_name']).'</td>';
            echo'<td>'. ucfirst($results['song_artist']).'</td>';
            //echo'<td>'. ucfirst($results['song_album']).'</td>';

                echo '<td>';

                echo  '<img src="images/like.png" id="artist'.$pictureid.'" onClick="action(artist'.$pictureid.')"/></a>';
                echo '</td>'; 
                echo '</tr>';

                $pictureid = $pictureid + 1;

                }

And here is my javascript :

<script language="javascript">
   function action(imageid)
{
if(document.getElementById(imageid).src == 'like.png' )
document.getElementById(imageid).src = 'like1.png';
else
document.getElementById(imageid).src = 'like1.png';
}
</script>          

You're missing some quotes here:

echo  '<img ... onClick="action(\'artist'.$pictureid.'\')"/></a>';
// quotes missing here ----------^---------------------^

In your output HTML it should currently look like, e.g., this:

<img ... onClick="action(artist1)"/>

This would call the method action() and use a variable of the name artist1, which does not exists. So in your method document.getElementById() returns null and you get the error.

Your method, however, requires a string input and thus you should enclose the parameter with quotes, so that it generates output like this:

<img ... onClick="action('artist1')"/>