Javascript Error "Null is not an Object" with a dynamically created html table

Question

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>

The HTML in your example isnt valid. Where does the <\a> open? — Moob
– Moob, Commented Sep 24, 2013 at 15:22
Your function doesn't need the if/else as it changes the .src to 'like1.png' regardless. — Moob
– Moob, Commented Sep 24, 2013 at 15:31

Sirko · Accepted Answer · 2013-09-24 15:16:57Z

1

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')"/>

answered Sep 24, 2013 at 15:16

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript Error "Null is not an Object" with a dynamically created html table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related