JavaScript - 点击,头像选择

时间:2014-04-26 12:17:20

标签: javascript image class

我正在为我的网站添加一个设置页面,用户可以为他们的帐户选择预定义的头像图片,但是我很难这样做。知道我在这里做错了吗?

这是我的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"/>

然后是我的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>

当我点击其中一个头像选择一个时,该类不会更新为“s”或将旧版本更新回“o”类。

JavaScript控制台显示: “未捕获的TypeError:无法将属性'className'设置为null”

任何建议都会非常感激!

1 个答案:

答案 0 :(得分:0)

我只是复制了您的代码并尝试了它,它就像一个魅力

尝试清除浏览器缓存并尝试增益!