关于javascript的按钮需要点俩次才能触发的原因

1.html部分
        

<input  value="关闭宠物" οnclick="guanB(this)"/>

        
2.js部分
function guanB(th) {

        a =chuWu.style.display        
        if (a === 'block') {
            chuWu.style.display = 'none';
            a = 'none'
            th.value = '开启宠物'
        } else {
            chuWu.style.display  = 'block';
            a = 'block'
            th.value = '关闭宠物'
          }

}

上述代码看起来并没有问题判断自身的 display的值 是否为 none/block

但是在实际点的时候会发现需要点俩次才能触发正在函数的代码 这样的原因是 当函数被调用第一次执行时并不能不断 disolay的值 dom节点没有对该节点添加

所有我们可以在外面给一个初始值比如：

let a =chuWu.style.display = 'block';
function guanB(th) {

            if (a === 'block') {
            chuWu.style.display = 'none';
            a = 'none'
            th.value = '开启宠物'
        } else {
            chuWu.style.display  = 'block';
            a = 'block'
            th.value = '关闭宠物'
          }

}

现在就已经解决了 不能声明在 函数内部 不然每次进这个函数 display的值都会 变为 block

这样就写死了！！！！！！！！！！！！！ 写成固定值了