need help with changing image using JS and PHP

[Whitescoot]

im new here. and i new to php. now i want to make a selectable seat where when user click it will change color and update the value "status" to the database. but now i got this error

 

Uncaught TypeError: Cannot read property 'src' of null

 

here is my code

 

<script language="javascript">

    function changeImage(pos) {

 

var pos = <?php echo(json_encode($data[pos])); ?>;

 

        if (document.getElementById(pos).src == "$base/images/kuning.png") 

        {

            document.getElementById(pos).src = "$base/images/hijau.png";

alert("ok1");

        }

        else if (document.getElementById(pos).src == "$base/images/hijau.png")

        {

            document.getElementById(pos).src = "$base/images/merah.png";

alert("ok2");

        }

else if (document.getElementById(pos).src == "$base/images/merah.png")

        {

            document.getElementById(pos).src = "$base/images/kuning.png";

alert("ok3");

        }

    }

</script>

 

<?php  

 

$q = "SELECT * FROM schedule WHERE inv_id=1";

$sql = mysql_query($q);

 

echo "<table>";

while($data=mysql_fetch_array($sql))

{

if($data["status"]=="done")

{

$image = "<a href='#'><img src='$base/images/hijau.png' id='$data[pos]'  border='0' width='33' height='26' alt='$data[pos]' onclick='changeImage($data[pos])'/></a>";

}

elseif($data["status"]=="onschedule")

{

$image = "<a href='#'><img src='$base/images/kuning.png' id='$data[pos]'  border='0' width='33' height='26' alt='$data[pos]' onclick='changeImage()'/></a>";

}

elseif($data["status"]=="late")

{

$image = "<a href='#'><img src='$base/images/merah.png' id='$data[pos]'  border='0' width='33' height='26' alt='$data[pos]' onclick='changeImage()'/></a>";

}

echo "<td><center>$image</br>$data[date]</center></td>";

}

 

echo "</table>";

?>