CODEWITHSUNDEEP
javascripthtmlcss
Philip Scriver
Philip Scriver

Reputation: 41

input type password is immovable

I have this code and the 1st input won't ever move whatever I do the only thing that made it move was float:right; but I don't want it to be like this I even created this div->P so maybe it would move. Has anyone encountered this problem before?

Is it possibly interfearing with my js? That's the only thing I can think of rn

                .inner {
                    display:inline-block;
                    margin-right:500px;
                }

                .pswd {
                    display:inline-block;
                    margin-right:500px;           
                }

          </style>
        </head>
        <body>
            <div class="P">
                <input class="inner" type="password" id="pswd">
                <input class="inner" type="button" value="Submit" onclick="checkPswd();"/>
            </div>

        <script type="text/javascript">
            function checkPswd() {
                var confirmPassword = "admin";
                var password = document.getElementById("pswd").value;
                if (password == confirmPassword) {
                     window.location="A.html";
                }
                else{
                    alert("Password incorrect.");
                }
            }
        </script>

Upvotes: 0

Views: 103

Answers (2)

Sarath Damaraju
Sarath Damaraju

Reputation: 361

There are multiple ways to center-align a div both vertically and horizontally on the screen.

I have used display:flex for the same.

  'use-strict'

  function checkPswd(form) {
    const confirmPassword = "admin";
    let passwordProvided = form.elements.newPassword.value;

    if (passwordProvided === confirmPassword) {
      // If correct
    } else {
      // If failure
    }

    // to prevent default action
    return false;
  }
.form--wrapper {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
  border: 2px dashed orange
}
<div class="form--wrapper">
  <form name="change-password" onsubmit="return checkPswd(this)">
    <input class="inner" name="newPassword" type="password">
    <input class="inner" type="submit" value="Submit" />
  </form>
</div>

Upvotes: 0

Mike Poole
Mike Poole

Reputation: 2055

This should work if you use the ID selector rather than the class selector (i.e. use # rather than .):

            #pswd {
                display:inline-block;
                margin-right:500px;           
            }

Upvotes: 1

Related Questions