onClick не работает при первом нажатии - PullRequest
Новая
       29

onClick не работает при первом нажатии

0 голосов
/ 30 декабря 2018

Я пытаюсь позволить элементу button переключать свой текст между «Follow» и «Unfollow», но почему 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'); }
    }

Ответы [ 5 ]

0 голосов
/ 30 декабря 2018

Проблема в пробелах, попробуйте

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>

ИЛИ

Может быть лучше использовать класс (или функцию с замыканием), чтобы проверить состояние кнопки, чтобы переключиться как проверкасостояние или 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>

Удачного кодирования!

0 голосов
/ 30 декабря 2018

Попробуйте это: 

<!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>
0 голосов
/ 30 декабря 2018

Вы можете использовать .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>
0 голосов
/ 30 декабря 2018

Здесь есть две проблемы:

Во-первых, стандартное поведение "submit" элемента <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>
0 голосов
/ 30 декабря 2018

Как указала @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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...