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 属性，则可以只使用{{ 3}}按钮字符串上的方法，以删除字符串前后的所有空白，如下所示：

/* 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>

Answer 2

您可以使用.onclick。在某种程度上，它更容易理解：

var button = document.getElementsByClassName("follow")[0];

button.onclick = function(e) { 
  if(button.textContent == "Follow") { button.innerText = "Unfollow" } 
  else { button.innerText = "Follow" }

}

<button class="follow">Follow</button>

Answer 3

这里有两个问题；

首先，<button>元素的默认“提交”行为将在用户单击期间生效，在<button>的情况下，这将导致浏览器重新加载并刷新页面。结果，由于页面重新加载而无法遵守预期的行为。

要防止页面重新加载行为，您只需在事件处理程序中return false;：

<button onclick="return false;">
Return false stops page reload on button click
</button>

第二个问题是，传递给string的输入follow_test()需要加括号（即删除空格），以确保string === 'Follow'的值为true，从而使Unfollow为第一次点击后立即显示。这可以通过trim()方法来实现：

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

<form method="post">
  <button class="follow" onclick="this.innerHTML = follow_test(this.innerHTML); return false;">

        Follow

    </button>
</form>

Answer 4

问题是空格，请尝试

Javascript

function follow_test(string) {
   if (string.indexOf('Follow')!== -1) { 
      return ('Unfollow'); 
   } else { 
      return('Follow');
   }
}

或者您可以将HTML更改为以下内容，并使用innerText删除内部空格并使当前函数正常工作

HTML

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

OR

最好使用一个类（或带有闭包的函数）来检查按钮的状态，以便在检查状态或HTML很危险时进行切换，代码中的任何其他内容最终都可能改变它并破坏功能

类似这样的东西：

Javascript

class toggleFollowState {
   toggle(){
      this.state = !this.state
      return this.getState()
   }
   getState(){
      return this.state ? 'Unfollow' : 'Follow'
   }
}

const followState = new toggleFollowState()
console.log(followState.toggle())
// logs true
console.log(followState.toggle())
// logs false
console.log(followState.getState())
// logs false

现在您可以像这样设置HTML

HTML

<form method="post">
   <button class="follow" onclick="this.innerHTML = followState.toggle()">
   Follow
   </button>
</form>

编码愉快！

Answer 5

请尝试以下代码。

<form method="post">
    <button class="follow" type="button" onclick="if(this.innerHTML == 'unFollow'){ this.innerHTML='Follow';}else{this.innerHTML='unFollow';};return false">
        Follow
    </button>
</form>

Answer 6

尝试一下：

<!DOCTYPE html>
<html>
    <body>

        <button id="toggle" onclick="myFunction()">Follow</button>

        <script>

            function myFunction() {
                var change = document.getElementById("toggle");
                if (change.innerHTML == "Follow")
                {
                    change.innerHTML = "Unfollow";
                }
                else {
                    change.innerHTML = "Follow";
                }
            }

        </script>
    </body>
</html>

onClick在首次点击时不起作用

6 个答案:

Javascript

HTML

OR

Javascript

HTML