CODEWITHSUNDEEP
html
theCoderThatTries
theCoderThatTries

Reputation: 3

How to make a <input type="password"> disappear

So this is my first question. I'm very new to coding, and only have done a few basic programs, so please don't judge me if the answer is obvious. Me and my friend have worked together to create a chat app. We are currently making a password for the program because right now, anyone with the url can join. I am already aware of <input type="password> and I have made a little program using it, but what I want to do is to make this code more secure/make other code appear and the button and password disappear. (This is the program I was talking about) 

<!DOCTYPE html> 
<html> 
    <body>  
        <script> 
            function pswChecker(){
                var psw = document.getElementById("psw").value; 
                if(psw == "password") {
                    alert("Code goes here.");
                } else {
                    window.close();
                }
            }   
        </script>
        <div class="fadeMe">
        <div> 
        <div style="color=white;">What is the password?</div>
            <input type="text" id="psw" name="psw">
            <input type="button" value="Submit" id="submit" onClick="pswChecker()"> 
        </div>
    </body> 
 </html>

Upvotes: 0

Views: 374

Answers (2)

Mat Sz
Mat Sz

Reputation: 2552

Keeping your password inside of HTML source is not secure and everyone who can access your website can see the password. Since you are working on a chat application I assume you have some sort of a server - you will have to perform checks on the back end.

To hide an element you can add an ID to it and use the following code:

const passwordDiv = document.getElementById("password");
const hideButton = document.getElementById("hide");

hideButton.addEventListener("click", function () {
    passwordDiv.style.display = 'none';
});
<div id="password">
The password form goes here.
<button id="hide">Hide</button>
</div>

If you want to show something else you can use the same code but set the display to block instead.

Upvotes: 1

Derek
Derek

Reputation: 185

To add a style which is what I think you want you can do something like this.

document.getElementsByClassName("fadeMe").style.display = "none";

Upvotes: 0

Related Questions