Show a `
` when the correct password has been entered into a form

Question

I’m creating a page with content on it initially set as hidden. At the top of the page there’s a form asking for a password. Once entered, the <div> should display as block, but I cannot seem to connect the two functions.

document.querySelector("#pwd").onsubmit(function() {
  if (document.querySelector('#pwd').value == "test123") {
    document.getElementById("#content").style.display = "block";
  }
});

#content {
  height: 250px;
  width: 250px;
  background-color: red;
  margin-top: 20px;
  display: none;
}

<form>
  Enter the password to see the content:
  <input id="pwd" type="password" name="pwd" />
</form>
<div id="content">
  Testing Content
</div>

I think all you need to do is change `document.querySelector("#pwd").onsubmit` to `document.querySelector("#pwd").onchange` — Joe Lissner, Oct 31 '22 at 16:50
`#content` isn’t an ID. The ID is `content`. A text field doesn’t ever dispatch a `submit` event; forms do. The correct way to do this is to change that `
` to ` — Sebastian Simon, Oct 31 '22 at 17:12
Changed the `
` as per your instruction. Used the code but still not luck. — Miklos Arpadfi, Nov 04 '22 at 15:40

score -2 · Answer 1 · answered Oct 31 '22 at 17:06

-2

Try This

<html>
<body>
<form id="iniForm" onSubmit="tampil()" action="#">
    Enter the password to see the content:
    <input id="pwd" type="password" name="pwd" />
</form>
<div id="content" style="display:none">
    Testing Content
</div>   
</body>
</html>

Javascript:

<script>
function tampil() {
if(document.getElementById('pwd').value == "test123"){
  document.getElementById('content').style.display='block'
  }
}
</script>

answered Oct 31 '22 at 17:06

Mahen

24
3

[“Try this” answers are not useful](//meta.stackoverflow.com/a/298811/4642212). Please add some explanation. Code-only answers are less useful for future readers and don’t explain the OP’s mistake or how to approach the problem. – Sebastian Simon Oct 31 '22 at 17:07
Inline event handlers like `onsubmit` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Please _never_ suggest or encourage these attributes. The last browser that still needs them reached end of life nearly two decades ago. – Sebastian Simon Oct 31 '22 at 17:08
iam sorry, I'm a beginner – Mahen Oct 31 '22 at 17:45

Show a `` when the correct password has been entered into a form

1 Answers1

Show a `
` when the correct password has been entered into a form