javascript - onClick 在第一次点击时不起作用

Question

我试图让 button 元素在“关注”和“取消关注”之间切换其文本，但为什么 Javascript 在第一次点击按钮时没有反应？

HTML:

<form method="post">
    <button class="follow" onclick="this.innerHTML = follow_test(this.innerHTML)">

        Follow

    </button>
</form>

JavaScript:

    function follow_test(string) {
        if (string === 'Follow') { return ('Unfollow'); } else { return('Follow'); }
    }

Answer 1

正如@Slaks 所指出的，原因是按钮文本中的空白导致运行 else 语句，因为 "string " 不是严格相等 ( === ) 到 "string"。

您可以只使用 innerText 属性忽略空白而不是像这样的 innerHTML 属性:

/* JavaScript */
var btn = document.querySelector("button");

function follow_test(string) { 
    let text = string.target;

    if (text.innerText === "Follow") {
        text.innerText = "Unfollow";
    } else {
        text.innerText = "Follow";
    }    
}

btn.addEventListener("click", follow_test);

<!-- HTML -->
<form method="post">
    <button type="button" class="follow"> // added 'type="button"' to prevent page reload for example's sake
        Follow
    </button>
</form>

---

或者如果您更喜欢使用 innerHTML 属性或想使用 textContent 属性，您可以只使用 trim()按钮字符串上的方法删除字符串前后的所有空白，如下所示:

/* JavaScript */
var btn = document.querySelector("button");

function follow_test(string) { 
    let text = string.target;
    
    if ((text.innerHTML).trim() === "Follow") {
        text.innerHTML = "Unfollow"; 
    } else {
        text.innerHTML = "Follow";
    }
    
}

btn.addEventListener("click", follow_test);

<!-- HTML -->
<form method="post">
    <button type="button" class="follow"> // added 'type="button"' to prevent page reload for example's sake
        Follow
    </button>
</form>