I've been trying to have a password only form that shows a hidden div on the same page as the form when the password is correct. I don't want to reload either but not sure how to do that.
function checkPswd() {
var confirmpassword = "admin";
var password = document.getElementById("pass").value;
if (password == confirmpassword) {
document.getElementById('hidden');
if (x.style.display === "none") {
x.style.display = "block";
} else {
alert('tryagain');
x.style.display = "none";
}
};}.hidden {
display: none;
}<form method="post">
<label for="pswd">enter password</label>
<input type="password" id="pass">
<input type="button" value="go" onsubmit="checkPswd();" /></form>
<div class="hidden">
<p>this part I want hidden from people who don't know the password</p>
</div>I'm pretty sure the javascript is wrong but is there another way to do this?
Few things:
You forgot to assign the returned value of document.getElementById('hidden') to x
A button does not have a submit event. You are perhaps looking for the click event
There is no element with the hidden id. You are mixing it up with the element with the hidden class.
function checkPswd() {
var confirmpassword = "admin";
var password = document.getElementById("pass").value;
if (password == confirmpassword) {
var x = document.querySelector('.hidden');
if (x.style.display === "none") {
x.style.display = "block";
} else {
alert('tryagain');
x.style.display = "none";
}
};
}.hidden {
display: none;
}<form method="post">
<label for="pswd">enter password</label>
<input type="password" id="pass">
<input type="button" value="go" onclick="checkPswd();" /></form>
<div class="hidden">
<p>this part I want hidden from people who don't know the password</p>
</div>