动态创建的 html 表出现 Javascript 错误 "Null is not an Object"

Question

我有一个动态创建的 html 表格，每行的最后一个单元格中有一张图片(如 .png)。我想要实现的是用户单击这张图片后显示另一张图片(如1.png)。然而我不断收到“Null is not an Object”，我的 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>          

Answer 1

您在这里缺少一些引号:

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

在您的输出 HTML 中，它当前应如下所示:

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

这将调用方法 action() 并使用名称为 artist1 的变量，该变量不存在。因此，在您的方法 document.getElementById() 中返回 null 并且您会收到错误。

但是，您的方法需要字符串输入，因此您应该用引号将参数括起来，以便它生成如下输出:

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