Change button in javascript when clicked

Question

I'm using following codes in a JSP page.This is my function to change button text by a button click in JavaScript. How do I change the button to click?

<!-- 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>

You're repeating ids. Related: https://stackoverflow.com/questions/59887834/getting-the-value-of-the-input-field-using-jquery/59888053#59888053 — Taplar, Apr 13 '20 at 14:52

score 0 · Accepted Answer · answered Apr 13 '20 at 15:22

The html seems to be broken. Only use 1 button, never reuse an id attribute.

It is not completely evident what you want to achieve, but you probably want to add a visibility state to your button and visualize it with an embedded icon and show a matching text.

Importing the material design font, you would only need to change these texts. Your button also needs state to conveniently inform the handler what to do (this could also be derived from the current structure of the element but it would be unneccessarily complicated).

Example html

<!DOCTYPE html>
<!--
    https://stackoverflow.com/questions/61189795/change-button-in-javascript-when-clicked
-->
<html>
    <head>
        <title>Adorning buttons with material icons</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
        <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#btnvisibility").on("click", function ( eve ) {
                    let b_isVisible = this.classList.contains("_btn-visible")
                      , s_buttontext
                      , s_text
                      ;

                    if (b_isVisible) {
                        s_buttontext    = 'visibility off';
                        s_text          = 'visibility_off';
                        this.classList.remove("_btn-visible");
                    } else {
                        s_buttontext    = 'visibility';
                        s_text          = 'visibility';
                        this.classList.add("_btn-visible");
                    }                      
                    $("span", this).text(s_buttontext);
                    $("i", this).text(s_text);
                    $(this).val(s_buttontext);
                });
            });
        </script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <button id="btnvisibility" class="btn btn-primary btn-round _btn-visible">
            <i class="material-icons">visibility</i>
            <span>visibility</span>
        </button>
    </body>
</html>

Explanation

The css class _btn-visible encodes the visibility state for the button.
The textual id for the icon to visualize the visibility state is the textual content of the i element inside the button. This text is changed upon a click.
The button label is remaining text inside the button. For easier referencing it is wrapped in a span element. This text is also changed upon a click.

saroj kumar · Answer 2 · 2020-04-13T15:55:38.800

I think this is what you're looking for.

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

Change button in javascript when clicked

2 Answers2