CODEWITHSUNDEEP
javascripthtmlcss
Albenis Kërqeli
Albenis Kërqeli

Reputation: 130

display username and password value in a text on javascript

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>

Upvotes: 1

Views: 1219

Answers (1)

SMAKSS
SMAKSS

Reputation: 10520

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>

Upvotes: 1

Related Questions