JavaScript - On click, avatar selection

Vote count:

0

I am adding a settings page to my website, where users can select pre-defined avatar images for their account, I'm having trouble doing so, however. Any idea what I'm doing wrong here?

Here is my HTML:

<img id="t7" onClick="updateAv(7);" src="../images/avatars/thumb7.png" class="o"/>
<img id="t8" onClick="updateAv(8);" src="../images/avatars/thumb8.png" class="o"/>
<img id="t4" onClick="updateAv(4);" src="../images/avatars/thumb4.png" class="o"/>
<img id="t3" onClick="updateAv(3);" src="../images/avatars/thumb3.png" class="o"/>
<img id="t0" onClick="updateAv(0);" src="../images/avatars/thumb0.png" class="s"/>
<img id="t9" onClick="updateAv(9);" src="../images/avatars/thumb9.png" class="o"/>
<img id="t2" onClick="updateAv(2);" src="../images/avatars/thumb2.png" class="o"/>
<img id="t6" onClick="updateAv(6);" src="../images/avatars/thumb6.png" class="o"/>
<img id="t5" onClick="updateAv(5);" src="../images/avatars/thumb5.png" class="o"/>

Then my JavaScript:

<script>
        var thumb;
        var globalNum = 0;

        var t0 = document.getElementById('t0');
        var t2 = document.getElementById('t2');
        var t3 = document.getElementById('t3');
        var t4 = document.getElementById('t4');
        var t5 = document.getElementById('t5');
        var t6 = document.getElementById('t6');
        var t7 = document.getElementById('t7');
        var t8 = document.getElementById('t8');
        var t9 = document.getElementById('t9');
        thumb = "thumb0";

        function updateAv(num, str) {
            globalNum = num;
            clearAllT();
            eval("t"+num).className = "s";
            thumb = "thumb"+num;
        }

        function clearAllT() {
            t0.className = "o";
            t9.className = "o";
            t2.className = "o";
            t3.className = "o";
            t4.className = "o";
            t5.className = "o";
            t6.className = "o";
            t7.className = "o";
            t8.className = "o";
        }
</script>

When I click on one of the avatars to select one, the class doesn't update to "s" or clear the old one back to the class of "o".

The JavaScript console shows: "Uncaught TypeError: Cannot set property 'className' of null"

Any suggestions would be appreciated, greatly!

asked 20 secs ago

user1637318

6