js 按钮点击文字循环更换


 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>


<button id="clab" type="button" onclick="myFunction()">关注</button>

<script>
    function myFunction() {
        console.log(document.getElementById('clab').innerHTML);
        if(document.getElementById('clab').innerHTML==="关注"){
            document.getElementById('clab').innerHTML="已关注";
        }
        else{
            document.getElementById('clab').innerHTML="关注";
        }
</script>

</body>
</html>

 <button id="clab" type="button" onclick="myFunction(this)">关注</button>

<script>
    function myFunction(dom) {
         var str = dom.innerHTML =="已关注"?  "关注":"已关注";
            dom.innerHTML =str;
        }
</script>

这样有多个地方需要调用的话就可以通用了


        function myFunction() {
            console.log(document.getElementById('clab').innerHTML);
            if (document.getElementById('clab').innerHTML === "关注") {
                document.getElementById('clab').innerHTML = "已关注";
            }
            else {
                document.getElementById('clab').innerHTML = "关注";
            }
        }///////////////大括号没闭合出错了

要是关注的前面还有张图片点击关注既要变成已关注而且图片消失再点击又恢复图片加关注怎么办