display username and password value in a text on javascript

Question

i want to ask and discuss with you for a problem in javascript, i want to display username and password input value on a innerHTML text , but on text it shows only undefined and no any other value , any solution for this ? is this possible ? i tried many method but no one works Thanks so much who helps me with any solution

let flex = document.querySelector(".flex");
let user = document.getElementById("text1").value;
let pass = document.getElementById("text2").value;
let submit = document.getElementById("submit");
let btn = document.getElementById("btn");
submit.addEventListener("click" , function() {
   let result = document.getElementById("result");
  result.innerHTML = "Albenis.Kerqelis";
  result.style.width = "100%";
  result.style.minHeight = "40px";
  result.style.opacity = "1";
  result.innerHTML=(`Wow, you username is  ${user} and your password is ${pass.value}`);
  
})

body {
  display:flex;
  flex-direction:column;
  padding:0;
  font-family:'Roboto' , sans-serif;
  justify-content:center;
  align-items:center;
  margin:0;
  background-color:whitesmoke;
}

.flex {
width:250px;
 background-color:white;
  display:flex;
  align-items:center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  flex-flow:column wrap;
  justify-content:center;
  padding:30px;
  margin:40px 0;
  min-height:400px;
}

input {
 background-color:whitesmoke;
  color:black;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border:none;
  padding:15px;
  margin:20px 0;
}



#result {
 width:0;
  background-color:springgreen;
  color:white;
  opacity:0;
  align-items:center;
  display:flex;
  font-weight:bold;
  transition:ease-in-out 1s;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
min-height:0;
  flex-flow:column wrap;
  justify-content:center;
  
}

<body>
  <div class="flex">
  <h1>Login form</h1>
    <input type="text" id="text1" placeholder="Type Your Username">
    <input type="password" id="text2" placeholder="Type Your Password">
    <button type="submit" id="submit">Sign In</button>
    <span id="result"></span>
  </div>
  </body>

You're accessing pass.value twice. Once in variable initialisation and another in the click callback. — evolutionxbox
– evolutionxbox, Commented Oct 12, 2020 at 0:21
i tried to remove second value from "pass" but still dont worked — Albenis Kërqeli
– Albenis Kërqeli, Commented Oct 12, 2020 at 0:24

SMAKSS · Accepted Answer · 2020-10-12 00:27:24Z

Well, you have some issues in your code.

First of all, you get the value of your user and password element before the onclick event so by default they will be empty because the script will run once in the page load stage. So when you try to use their values they will be empty.
You getting undefined because you trying to access the password value twice and since there is only one property named value in the password it will return undefined.

So your final code should be like this:

const result = document.getElementById("result");
const submit = document.getElementById("submit");
const user = document.getElementById("text1");
const pass = document.getElementById("text2");

submit.addEventListener("click", function() {
  result.style.width = "100%";
  result.style.minHeight = "40px";
  result.style.opacity = "1";
  result.innerHTML = (`Wow, you username is  ${user.value} and your password is ${pass.value}`);
});

body {
  display: flex;
  flex-direction: column;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  justify-content: center;
  align-items: center;
  margin: 0;
  background-color: whitesmoke;
}

.flex {
  width: 250px;
  background-color: white;
  display: flex;
  align-items: center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  flex-flow: column wrap;
  justify-content: center;
  padding: 30px;
  margin: 40px 0;
  min-height: 400px;
}

input {
  background-color: whitesmoke;
  color: black;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: none;
  padding: 15px;
  margin: 20px 0;
}

#result {
  width: 0;
  background-color: springgreen;
  color: white;
  opacity: 0;
  align-items: center;
  display: flex;
  font-weight: bold;
  transition: ease-in-out 1s;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  min-height: 0;
  flex-flow: column wrap;
  justify-content: center;
}

<body>
  <div class="flex">
    <h1>Login form</h1>
    <input type="text" id="text1" placeholder="Type Your Username">
    <input type="password" id="text2" placeholder="Type Your Password">
    <button type="submit" id="submit">Sign In</button>
    <span id="result"></span>
  </div>
</body>

Collectives™ on Stack Overflow

display username and password value in a text on javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related