慕课网2-16编程题问题

题目是:使用通过DOM获取HTML元素的方式绑定事件
gif图如下:
慕课网2-16编程题问题_第1张图片


<body>
    <input type="button" value="全选">
    <script type="text/javascript">
        //补充代码
        var btn = document.getElementsByTagName("input")[0];

        function zhengxuan() {
            btn.value = "全选"
        }

        function fanxuan() {
            btn.value = "反选"
        }
        if (btn.value == "全选") {
            btn.onclick = fanxuan;
        } else {
            btn.onclick = zhengxuan;
        }
    script>
body>

运行之后发现点击全选可以变成反选,再点击反选就没有变化了。
应该是这样:


<body>
    <input type="button" value="全选">
    <script type="text/javascript">
        //补充代码
        var btn = document.getElementsByTagName("input")[0];
        btn.onclick = myclick;

        function myclick() {
            if (btn.value == "全选") {
                btn.value = "反选";
            } else {
                btn.value = "全选";
            }
        }
    script>
body>

这时为什么呢?在错误的代码中,程序按顺序进行,执行完

if (btn.value == "全选") {
            btn.onclick = fanxuan;

之后,整个程序就完事了不会去执行else的条件。所以是要当onlick
时触发函数,然后函数里再来判断执行条件。

==能犯这种错,我也是弱智……==

你可能感兴趣的:(JavaScript)