javascript - 動的に作成されたhtmlテーブルでのJavascriptエラー「Nullはオブジェクトではありません」

Question

各行の最後のセル (like.png) に画像を含む動的に作成された html テーブルがあります。私が達成したいのは、ユーザーがこの画像をクリックした後、別の画像が表示されることです (like1.png)。ただし、「Null はオブジェクトではありません」というメッセージが表示され続けます。JavaScript コードに何か問題がある可能性があります ...

ご協力ありがとうございました ：）

テーブルを作成する私のphpは次のとおりです。

<?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;

                }

そして、ここに私の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>