js传入对象，并修改对象子元素问题

Question

通过button点击次数的奇偶性来修改button的属性以及button下面子元素的属性：

html：

<button onclick="do_favorite(this)"><i></i></button>

js：

var do_times = 0;

function do_favorite(btn){

    if(do_times%2== 0){

        btn.style.backgroundColor = '#a3a3a6';

        btn.getElementsByTagName('i')[0].className = "fa fa-star-o";

        btn.innerHTML = '加入收藏';

    }else {

        btn.style.backgroundColor = '#00a0e9';

        btn.getElementsByTagName('i')[0].className = "fa fa-star";

        btn.innerHTML = '取消收藏';

    }

    do_times++;

    

}

点击按钮第一遍时是没有问题的，当多点几遍的时候，就会出现btn.getElementsByTagName('i')[0]未定义的错误。本人自学小白一名，希望大神不吝赐教

Answer 1

你用了innerHTLML，会把i标签给清除了，所以会报错