How do I make a checkbox that can show password?-CodePudding

Here i was just wanted to make a checkbox that shows a password instead of dots. Here is my code.

HTML:

<html>
  <head>
    <title>Calvin's Personal Diary and Notes</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <h3>what's the magic word???</h3>
    <form method="post" action="/diary/diary.php">
      <input type="password" name="RandomPassword" placeholder="password">
      <br>
      <input type="submit" value="Enter?">
    </form>
    <br> <br>
    <a href="/diary/password.html">i don't know the password</a>
  </body>
</html>

PHP:

<html>
  <head>
    <title>Calvin's Personal Diary and Notes</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <p><?php
if (($_REQUEST['RandomPassword'] == "please"))
{
  echo "<h1>Calvin's Personal Diary and Notes</h1>";
  echo '<a href="/">go back home</a>';
  echo "<br><br>";
  echo "<b><u>03/21/2022 10:49: </b></u><p>The last one was intense, but I get through it. phew";
  echo "<br><br><br>";
  echo "<b><u>03/21/2022 10:29: </b></u><p>2nd Exam just started. I'm using iPad for that since my computer battery is running out. I can't share screen. So I ask the teacher to share screen then, simple? really?";
  echo "<br><br><br>";
  echo "<b><u>03/21/2022 09:37: </b></u><p>One done, 8 more to go. I have to wait until 10AM. My battery is dropping right now...";
  echo "<br><br><br>";
  echo "<b><u>03/21/2022 08:00: </b></u><p>First biggest exam ever. I hope it went well</p>";
}
else
{
 echo "<p>Wrong password, try again.";
 echo "<br><br>";
 echo "Wait a minute, you trying to cheat or hacker? STOP IT!!!!</p>";
 echo '<p>Go <a href="/diary/password.html">here</a> to see the clue of the password';
 echo "<br><br>";
 echo '<a href="/">go back home</a>';
}
    ?></p>
  </body>
</html>

I think you need the PHP code so here it is. So here's how it works: if I type the password please, it will display all the info. If i type the wrong password, or just entered the file directly, it will display a wrong password warning instead of the info.

Now the problem is how to put the Show password checkbox that can show the password instead of dots?

CodePudding user response：

   function myfunction(){
            var show = document.getElementById('show');
            if (show.type== 'password'){
                show.type='text';
            }
            else{
                show.type='password';
            }
        }

    <div >
        <label for="">Password</label>
        <input type="password" name="" id="show"> <br>
        <label for="">Show Password</label>
        <input type="checkbox" name="" onclick="myfunction()"id="">
 
    </div>