JavaScript 单击确认时确认框不起作用

Question

I try to make a confirm box to inform user if they really want to show password field in table. But it not working when click Confirm.

Here's my code:

HTML

<span onclick="myFunction()" class="fa fa-fw fa-eye fa-eye-slash field-icon toggle-password"></span>
<span style="display:none;" id="password-field">123456</span>

JS:

function myFunction() {
          
          if (confirm("Are you sure you want to show your password on the screen?)) {
              
              $(".toggle-password-<?=$model->id?>").click(function() {

            $(this).toggleClass("fa-eye-slash");
             
            });
                

            $(document).ready(function(){
                $(".toggle-password-<?=$model->id?>").click(function(){
                $("#password-field-<?=$model->id?>").toggle();
                });
            }); 
        
          } else {
            //do nothing
          }
          
        }

Please help me with this.

Thank you!

Answer 1

here's an example for fixed code: https://codepen.io/mitni455/pen/YzwJwNL?editors=1010

I have removed the PHP specific stuff.

 function myFunction() { if (confirm("Are you sure you want to show your password on the screen?")) { $('#password-field').show(); } else { $('#password-field').hide(); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="myFunction()"> My Function </button> <span style="display:none;" id="password-field"> 123456 </span>

OK a few things here:

• When you click confirm you are simply adding 2 more click handlers and a document onload handler (it's also a memory leak).
• The code $(".toggle-password-<?=$model->id?>").click adds another (redundant) click handler to the .toggle-password-123 button
• You never made any call to show/hide or change the display value for the span#password-field ... this is resolved in the refactored code above
• You missed the closing quotation in the confirm("Are you sure you want to show your password on the screen?")
• $(document).ready won't fire and is redundant because the document will have already loaded by the time you click the button. So you can remove that.

Here's what you did: on confirm:

1. add a click handler to .toggle-password-{id} (which is the button you just clicked);
2. add a document onload event handler (to a document already loaded);
3. once the document has loaded (will never fire), add another click handler to .toggle-password-{id};
4. Finally, when that is clicked THEN toggle the password field

Answer 2

<button onclick="myFunction()" class="fa fa-fw fa-eye fa-eye-slash field-icon toggle-password">Click me</button>
<span style="display:none;" id="password-field">123456</span>

<script type="text/javascript">

function toggledisplay(elementID)
     {
        (function(style) {
             style.display = style.display === 'none' ? '' : 'none';
                })(document.getElementById(elementID).style);
     }

function myFunction() {  
        
    if (confirm("Are you sure you want to show your password on the screen?")) {
        toggledisplay("password-field");
        
      }
}

I used the button tag to be able to see where to click, when replicating your code. Then, added the function toggledisplay(elementID) to toggle the display style whenever the confirm is True .