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

黄晓晓小智
  • 21

通过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]未定义的错误。本人自学小白一名,希望大神不吝赐教

回复
阅读 1.1k
4 个回答
✓ 已被采纳

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

在你第一次点击的时候 dom 变成了

<button onclick="do_favorite(this)" style="background-color: rgb(163, 163, 166);">加入收藏</button>

所以第二次点击再获取 <i> 标签就会报错。
btn.innerHTML = '加入收藏';<button> 标签里的内容都覆盖了。

如果你要保持这个逻辑可以这样写

// ...
if(do_times%2== 0){
    // ...
    if (do_times === 0) {
        btn.innerHTML += '加入收藏';
    } else {
        btn.innerHTML = btn.innerHTML.replace(/取消/, '加入');
    }

}else {
    // ...
    btn.innerHTML = btn.innerHTML.replace(/加入/, '取消');
}
// ...

这个思路感觉......
你可以通过收藏的状态进行判断,例如有class='fa-star-o'的时候则执行取消,否则则执行收藏即可。

你知道吗?

宣传栏