Question 285691 in Html Question posted in
Some basic documentation can be found here.

Html – JavaScript getting value from a text field

I am new in the world of JavaScript and I want to make a app which reads the username and prints out the username in the Console Log.

function OnClickButton() {
  var textarea = document.getElementById("Username");
  console.log(textarea.nodeValue);
}
button {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: medium;
    color:black;
    background-color: aliceblue;
    border-style: hidden;
    shape-outside: border-box;
    cursor: default;
    height: 36px;
    width: 144px;
    border-radius: 9px;
    top: 500px;
    left: 680px;
    position: absolute;
}

button:hover {
    background-color: orangered;
}
<label id="UsernameLabel" style="font-family: Verdana, Geneva, Tahoma, sans-serif; background-color: aliceblue;position:absolute; top: 250px;left:600px; width: 144px; height: 18px; border-radius:9px; text-align: center; font-size: medium; " >Username:</label>
  
<input type="text" id="Username"  style="font-family:Verdana, Geneva, Tahoma, sans-serif; background-color: aliceblue; position: absolute; top:250px;left:760px; width:144px; height:27px; border-radius: 9px;" maxlength="10"></input>
  
<label id="PasswordLabel" style="font-family: Verdana, Geneva, Tahoma, sans-serif; background-color: aliceblue;position:absolute; top: 350px;left:600px; width: 144px; height: 18px; border-radius:9px; text-align: center; font-size: medium;">Password:</label>
  
<input type="password"   id="Password" style="font-family:Verdana, Geneva, Tahoma, sans-serif; background-color: aliceblue; position: absolute; top:350px;left:760px; width:144px; height:27px; border-radius: 9px;" maxlength="10"></input>
  
<button onclick="OnClickButton()">Sign in</button>

<script src="frontSourceCode.js"></script>

When I run the program every time I press on the button the NULL word is added to the Console Log.After some search it is the value property of a HTML Element which returns the output of a HTML Element however I cant find it in the list of available properties given out by VSCode.Unless the value property exists, which property should I search out?

Tags:

2

Answers


  1. 0

    I removed all the position styles to make it so the form can be seen on stackoverflow, but just using console.log(textarea.value) works.

    function OnClickButton() {
  var textarea = document.getElementById("Username");
  console.log(textarea.value);
}
    button {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: medium;
    color:black;
    background-color: aliceblue;
    border-style: hidden;
    shape-outside: border-box;
    cursor: default;
    height: 36px;
    width: 144px;
    border-radius: 9px;
    /*top: 500px;
    left: 680px;
    position: absolute;*/
}

button:hover {
    background-color: orangered;
}
    <label id="UsernameLabel" style="font-family: Verdana, Geneva, Tahoma, sans-serif; background-color: aliceblue; width: 144px; height: 18px; border-radius:9px; text-align: center; font-size: medium; " >Username:</label>
  
<input type="text" id="Username"  style="font-family:Verdana, Geneva, Tahoma, sans-serif; background-color: aliceblue;  width:144px; height:27px; border-radius: 9px;" maxlength="10"></input>
  
<label id="PasswordLabel" style="font-family: Verdana, Geneva, Tahoma, sans-serif; background-color: aliceblue; width: 144px; height: 18px; border-radius:9px; text-align: center; font-size: medium;">Password:</label>
  
<input type="password"   id="Password" style="font-family:Verdana, Geneva, Tahoma, sans-serif; background-color: aliceblue;  width:144px; height:27px; border-radius: 9px;" maxlength="10"></input>
  
<button onclick="OnClickButton()">Sign in</button>

<script src="frontSourceCode.js"></script>
    Login or Signup to reply.
  2. 0

    Check this code

      <script>
    function OnClickButton() {
      // Get the value from the username input field
      var usernameValue = document.getElementById("Username").value;

      // Log the value to the console
      console.log("Username: " + usernameValue);
    }
  </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search