document.getElementById JS HTML CSS

Question

I am trying to get my forms NOT TO reset. I am making a <input type="password" /> and whenever I click the button to submit the password, and they get it wrong, I need there to be something that shows that it is incorrect. It works, but only for a split second. Can you help me?

function desktop() {

  var pass = document.getElementById("pass").value;
  if (pass == "555") {
    alert("Welcome;")
  } else {
    document.getElementById("wrg").innerHTML = "Incorrect Password";

  }

}

#pass {
  border-radius: 8px;
  padding: 5px;
  margin-bottom: 5px;
}

#user {
  margin-bottom: 10px;
  padding-bottom: 0px;
  margin-top: 220px;
}

#wrg {
  visibility: visible;
}

<form>
  <center>
    <h1 id="user">User</h1>
    <input type="password" id="pass" placeholder=" Password" /><br>
    <button onclick="desktop()" id="pass">Sign In</button>
    <p id="wrg"></p>
  </center>
</form>

WHY are you using Javascript for authentication ?!?!?!?! — Zak
– Zak, Commented Jan 4, 2018 at 23:54
@Zak, could be just to learn the basics. We've all done something like this before I'm sure. — Phix
– Phix, Commented Jan 4, 2018 at 23:59
Your page is refreshed, when button is clicked -> form is submitted... Quick fix: <button type="button" onclick="desktop()" id="pass">Sign In</button> Default type is 'submit', when there is no type attribute set... — sinisake
– sinisake, Commented Jan 5, 2018 at 0:02

Daniel Beck · Accepted Answer · 2018-01-05 12:32:37Z

2

The button ends up submitting the form, which causes the window to refresh because there's no action attribute on the form.

You can prevent this by either making the button type="button" (rather than the default submit), using event.preventDefault(), or by returning false, as below. (But as noted in comments below, return false may not be the best approach: it's easy to forget to include the return in both the function and the onclick attribute, without which the form will submit anyway. event.preventDefault is the most explicit and therefore probably best way to handle this.)

function desktop() {
  var pass = document.getElementById("pass").value;
  if (pass == "555") {
    alert("Welcome;")
  } else {
    document.getElementById("wrg").innerHTML = "Incorrect Password";
  }
  return false;
}

#pass {
  border-radius: 8px;
  padding: 5px;
  margin-bottom: 5px;
}

#user {
  margin-bottom: 10px;
  padding-bottom: 0px;
  /*margin-top: 220px;*/
}

<form>
  <center>
    <h1 id="user">User</h1>
    <input type="password" id="pass" placeholder=" Password" /><br>
    <button onclick="return desktop()">Sign In</button>
    <p id="wrg"></p>
  </center>
</form>

(You do have duplicate pass IDs, which should be unique, and of course clientside authentication as done here isn't the least bit secure, but neither of those issues is directly relevant to your question. getElementById winds up returning the first matching element, which happens to be the one you wanted.)

edited Jan 5, 2018 at 12:32

answered Jan 5, 2018 at 0:09

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AuxTaco Over a year ago

Careful with using return false in a click handler. It will only work if you hook up the handler with onclick="return desktop()". If you use onclick="desktop()", or in a proper button.addEventListener handler, it does nothing. event.preventDefault() is more explicit and doesn't act weird.

user8624067 Over a year ago

Thank YOU! And yes, I am just a coder getting started.

Daniel Beck Over a year ago

@AuxTaco that's a good point, I'll edit the answer to include that. Thanks!

Marventus · Accepted Answer · 2018-01-05 01:04:04Z

1

You are using duplicate IDs for your button and input elements: pass.

Also, it would be easier to just add an event listener to the Sign In button and capture that event inside your function.

document.getElementById("pass").addEventListener('click', desktop);

function desktop(evt) {
  evt.preventDefault();
  var pass = document.getElementById("pass").value;
  if (pass == "555") {
    alert("Welcome;");
  } else {
    document.getElementById("wrg").innerHTML = "Incorrect Password";
  }
}

If you do it this way, remember to remove the onclick attribute from the button.

edited Jan 5, 2018 at 1:04

answered Jan 5, 2018 at 0:05

Marventus

8491 gold badge7 silver badges14 bronze badges

1 Comment

agrm Over a year ago

You need to add what event is supposed to trigger the event listener: .addEventListener('click', desktop)

Collectives™ on Stack Overflow

document.getElementById JS HTML CSS

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related