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'); }
    }

标签： javascripthtmlif-statementdom-events

Answer 1

正如@Slaks 指出的那样，原因是按钮文本中的空格导致 else 语句运行，因为" string "不严格等于（ === ） to "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>