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>

Answer 1

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>

display username and password value in a text on javascript

Question

1 answers

solution1
1 ACCPTED 2020-10-12 00:24:32

display username and password value in a text on javascript

Question

1 answers

solution1 1 ACCPTED 2020-10-12 00:24:32

solution1
1 ACCPTED 2020-10-12 00:24:32