Изменить кнопку в javascript при нажатии

Question

Я использую следующие коды на странице JSP. Это моя функция, чтобы изменить текст кнопки нажатием кнопки JavaScript. Как мне поменять кнопку на клик?

<!-- btn1 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
  <i class="material-icons">visibility</i>
  visibility
</button>

<!-- btn2 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
  <i class="material-icons">visibility_off</i>
  visibility off
</button>

<script>
    $(document).ready(function () {
        $("#btnvisibility").on("click", function () {
            $(".visibility").toggle("slow");
            if ($(this).val() == "visibility")
                $(this).val("visibility off");
            else
                $(this).val("visibility");
        });
    });

</script>

Answer 1

Кажется, что html сломан. Используйте только кнопку 1 , никогда не используйте атрибут id .

Не совсем очевидно, чего вы хотите достичь, но вы, вероятно, хотите добавить состояние видимости в свою кнопку и визуализируйте ее с помощью встроенного значка и отобразите соответствующий текст.

Импортируя шрифт дизайна материала, вам нужно будет только изменить эти тексты. Вашей кнопке также нужно состояние, чтобы удобно сообщить обработчику, что делать (это также может быть получено из текущей структуры элемента, но это будет излишне сложно).

Пример html

Пояснение

• Класс css _btn-visible кодирует состояние видимости для кнопка.
• Текстовым идентификатором значка для визуализации состояния видимости является текстовое содержимое элемента i внутри кнопки. Этот текст изменяется при нажатии.
• Метка кнопки - это оставшийся текст внутри кнопки. Для облегчения ссылок он заключен в элемент span. Этот текст также изменяется при нажатии.

Answer 2

Я думаю, это то, что вы ищете.

HTML

<!-- btn1 -->
<button class="btn btn-primary btn-round" id="btnvisibility">
 <i class="material-icons">visibility</i>
  visibility
 </button>
<button class="btn btn-primary btn-round" id="btnvisibility">
 <i class="material-icons">visibility_off</i>
 visibility off
</button>

JS

$(document).ready(function(){
 $("#btnvisibility").click(function(){
    $(this).text($(this).text() == 'visibility' ? 'visibility off' : 
      'visibility');
    });
   });