i cannot create an element below textbox if password is incorrect

Question

There is a problem with the following code: I tried to create an element in javascript but the element appears and disappears each time a click is performed.

function hi() {
  let user = document.getElementById('username').value;
  let email = document.getElementById('email').value;
  let password = document.getElementById('password').value;
  let cpassword = document.getElementById('cspassword').value;

  if (user == "" || email == "" || password == "" || cpassword == "") {
    alert('no field can be left empty')
  } else if (password != cpassword) {
    let par = document.createElement('p');
    let text = document.createTextNode('passwords do not match');
    par.appendChild(text);
    document.querySelector('form').appendChild(par);
  } else {
    alert('welcome');
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>forms</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
</head>

<body>
  <form class="myform">
    <input type="text" placeholder="username" id="username" name="">
    <input type="email" placeholder="Email" id="email" name="email">
    <input type="password" placeholder="password" id="password" name="password">
    <input type="password" placeholder="cpassword" id="cspassword" name="cpassword">
    <button onclick="hi();">submit</button>
  </form>
  <script src="forms.js"></script>
</body>

</html>

The expected behavior should be the creation of a paragraph if the password is incorrect.

score 1 · Answer 1 · answered May 17 '19 at 10:53

Instead of button tag use <input type="button" onclick="hi();" value="submit"/>

see Button vs input type button

function hi(){
let user = document.getElementById('username').value;
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
let cpassword = document.getElementById('cspassword').value;

if(user == "" || email == "" || password == "" || cpassword == "" ){
  alert('no field can be left empty')
}
else if(password != cpassword){
  let par = document.createElement('p');
  let text = document.createTextNode('passwords do not match');
  par.appendChild(text);
  document.querySelector('form').appendChild(par);
}
else {
  alert('welcome');
}
}

<form class="myform">
            <input type="text" placeholder="username" id="username" name="">
            <input type="email" placeholder="Email" id="email" name="email">
            <input type="password" placeholder="password" id="password" name="password">
            <input type="password" placeholder="cpassword" id="cspassword" name="cpassword">
            <input type="button" onclick="hi();" value="submit"/>
        </form>

it worked thanks i will keep that in mind and like to learn other things from you — Afolabi Ogunbanwo, May 17 '19 at 11:30

score 0 · Accepted Answer · answered May 17 '19 at 10:56

function hi(event) {
  let user = document.getElementById('username').value;
  let email = document.getElementById('email').value;
  let password = document.getElementById('password').value;
  let cpassword = document.getElementById('cspassword').value;

  if (user == "" || email == "" || password == "" || cpassword == "") {
    alert('no field can be left empty')
  } else if (password != cpassword) {
    let par = document.createElement('p');
    let text = document.createTextNode('passwords do not match');
    par.appendChild(text);
    document.querySelector('form').appendChild(par);


    event.preventDefault();   // This will prevent page get refresh...

  } else {
    alert('welcome');
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>forms</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-compatible" content="ie=edge">
</head>

<body>
  <form class="myform">
    <input type="text" placeholder="username" id="username" name="">
    <input type="email" placeholder="Email" id="email" name="email">
    <input type="password" placeholder="password" id="password" name="password">
    <input type="password" placeholder="cpassword" id="cspassword" name="cpassword">
    <button onclick="hi(event);">submit</button>
  </form>
  <script src="forms.js"></script>
</body>

</html>

score 0 · Answer 3 · answered May 17 '19 at 11:35

There is no reason to prefer <input type="button"> to <button> but in your case you should use <input type="submit"> as your button is supposed to submit a form.
Maybe you want to check if the message has been posted before creating it again on click.
You should use eventlistener.
You can use required attribute to check for input fields being empty.

HTML

<form class="myform">
    <input type="text" placeholder="username" id="username" name="">
    <input type="email" placeholder="Email" id="email" name="email">
    <input type="password" placeholder="password" id="password" name="password">
    <input type="password" placeholder="cpassword" id="cspassword" name="cpassword">
    <input id="abc" type="submit" value="submit" />
</form>

javascript

const passwordMatch = (a, b) => a == b;
const fieldsEmpty = (a, b, c, d) => a == "" || b == "" || c == "" || d == "";
var msgPasswordDoesNotMatchDisplayed = false;
var msgPasswordDoesNotMatch = void 0;
{
    msgPasswordDoesNotMatch = function(form) {
      let par = document.createElement('p');
      par.id = "message";
      let text = document.createTextNode('passwords do not match');
      par.appendChild(text);
      form.appendChild(par);
    }
}
var clearMessage = void 0;
{
    clearMessage = function () {
      var messageDiv = document.getElementById('message');
        if (messageDiv != null && typeof messageDiv !== 'undefined') {
       document.removeChild(messageDiv);
      }
    }
}
var hi = void 0;
{
    hi = function (e) {
        e.preventDefault();
        var form = this.form;
        var user = document.getElementById('username').value;
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        var cpassword = document.getElementById('cspassword').value;
        if (fieldsEmpty(user, email, password, cpassword)) {
            alert('no field can be left empty');
        }
        else if (!passwordMatch(password, cpassword)) {
            if (!msgPasswordDoesNotMatchDisplayed) {
                msgPasswordDoesNotMatch(form);
                msgPasswordDoesNotMatchDisplayed = true;
            }
        }
        else {
           clearMessage();
           alert('welcome');
        }
    }
}
document.getElementById('abc').addEventListener('click', hi, false);

i cannot create an element below textbox if password is incorrect

3 Answers3